解决React无限重渲染：useEffect钩子的应用与最佳实践

import React, { useState } from 'react';

function GetMovies() {
  const [movies_list, setMovies_list] = useState([]);

  async function Fetchmovies() {
    try {
      // 假设url已定义
      const response = await fetch(url, {
        method: 'GET',
        headers: {
          'Accept': 'application/json',
          'authorization':'token'
        },
      });
      const data = await response.json();
      console.log(data);
      return data; // 返回获取到的数据
    } catch (e) {
      console.error("Error fetching movies:", e);
      return []; // 错误时返回空数组
    }
  }

  // 问题所在：直接在渲染阶段调用异步函数并更新状态
  Fetchmovies().then(data => setMovies_list(data));

  return (
    // ... JSX 结构 ...
  );
}
export default GetMovies;

useEffect(() => {
  // 副作用代码
  return () => {
    // 可选的清理函数
  };
}, [依赖项数组]);

import React, { useState, useEffect } from 'react';
import { Card, CardContent, Divider, Autocomplete, TextField } from '@mui/material'; // 假设使用MUI组件

function GetMovies() {
  const [movies_list, setMovies_list] = useState([]);
  const url = 'YOUR_API_ENDPOINT'; // 确保url已定义

  // 将数据获取逻辑放入useEffect
  useEffect(() => {
    async function Fetchmovies() {
      try {
        const response = await fetch(url, {
          method: 'GET',
          headers: {
            'Accept': 'application/json',
            'authorization': 'token' // 替换为你的实际token
          },
        });
        const data = await response.json();
        console.log("Fetched movies:", data);
        setMovies_list(data); // 更新状态
      } catch (e) {
        console.error("Error fetching movies:", e);
        // 可以设置一个错误状态来显示给用户
      }
    }

    Fetchmovies(); // 调用数据获取函数
  }, []); // 空依赖项数组确保只在组件挂载时执行一次

  return (
    <Card>
      <Divider />
      <CardContent>
        <Autocomplete
          id='movies'
          name='movies'
          getOptionLabel={(option) => option.service_name || ''} // 确保option.service_name存在
          multiple
          options={movies_list}
          renderInput={(params) => <TextField {...params} label='Impacted movies:' />}
        />
      </CardContent>
    </Card>
  );
}

export default GetMovies;

import React, { useState, useEffect } from 'react';
import { Card, CardContent, Divider, Autocomplete, TextField, CircularProgress, Alert } from '@mui/material';

function GetMoviesRobust() {
  const [movies_list, setMovies_list] = useState([]);
  const [loading, setLoading] = useState(true); // 添加加载状态
  const [error, setError] = useState(null);     // 添加错误状态
  const url = 'YOUR_API_ENDPOINT';

  useEffect(() => {
    const Fetchmovies = async () => { // 将函数定义为const
      setLoading(true); // 开始加载时设置为true
      setError(null);   // 清除之前的错误
      try {
        const response = await fetch(url, {
          method: 'GET',
          headers: {
            'Accept': 'application/json',
            'authorization': 'token'
          },
        });

        if (!response.ok) { // 检查HTTP响应状态
          throw new Error(`HTTP error! status: ${response.status}`);
        }

        const data = await response.json();
        setMovies_list(data);
      } catch (e) {
        console.error("Error fetching movies:", e);
        setError("Failed to load movies. Please try again later."); // 设置错误信息
      } finally {
        setLoading(false); // 无论成功或失败，加载结束
      }
    };

    Fetchmovies();
  }, []);

  if (loading) {
    return (
      <Card>
        <CardContent style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100px' }}>
          <CircularProgress />
          <p style={{ marginLeft: '10px' }}>Loading movies...</p>
        </CardContent>
      </Card>
    );
  }

  if (error) {
    return (
      <Card>
        <CardContent>
          <Alert severity="error">{error}</Alert>
        </CardContent>
      </Card>
    );
  }

  return (
    <Card>
      <Divider />
      <CardContent>
        <Autocomplete
          id='movies'
          name='movies'
          getOptionLabel={(option) => option.service_name || ''}
          multiple
          options={movies_list}
          renderInput={(params) => <TextField {...params} label='Impacted movies:' />}
        />
      </CardContent>
    </Card>
  );
}

export default GetMoviesRobust;