Question

我似乎无法弄清楚为什么电影状态更改时我的MovieDetailCard组件不会重新渲染。我正在传递电影对象。当我更新状态时，日志会在useEffect中正确输出，但是MovieDetailsCard永远不会收到更新的对象。

df.name.str.replace(..)

下面是MovieDeatailsCard。在useEffect中，console.log（movie）始终返回null。

    const MovieDetails = () => {
    const [movie, setMovie] = useState({});
    const { id } = useParams();
    const { poster } = useParams();

  useEffect(() => {
    const fetchMovie = async () => {
      const response = await fetch(
        `http://www.randyconnolly.com/funwebdev/3rd/api/movie/movies.php?id=${id}`
      );

      const data = await response.json();

      setMovie({ ...data });
    };

    fetchMovie();
  }, []);

  useEffect(() => {
    console.log(movie); // this successfully outputs when movie updates
  }, [movie]);

  return (
    <div className="row">
      <div className="col s12 m6">
        <MovieDetailsCard poster={poster} movie={movie} /> // this does not update
      </div>
      <div className="col s12 m6">
        <CastCrewCard />
      </div>
    </div>
  );
};

Answer 1

默认情况下，效果会在每个完成的渲染之后运行，但是您可以选择仅在某些值更改后才触发效果。

引用：https://reactjs.org/docs/hooks-reference.html#conditionally-firing-an-effect

如果您要运行效果并仅将其清理一次（在挂载和卸载），则可以传递一个空数组（[]）作为第二个参数。这个告诉React你的效果不依赖于道具的任何值或状态，因此它不需要重新运行。这不是特殊处理情况—直接取决于依赖项数组始终如何有效。

尝试更新useEffect依赖项以包括 [id] ：

 useEffect(() => {
    const fetchMovie = async () => {
      const response = await fetch(
        `http://www.randyconnolly.com/funwebdev/3rd/api/movie/movies.php?id=${id}`
      );

      const data = await response.json();

      setMovie({ ...data });
    };

    fetchMovie();
  }, [id]);

Answer 2

确定要从API接收数据吗？该网站未显示。尝试此操作以测试API

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(json => console.log(json)

在状态声明（useState）中，最好声明将要从API接收所有密钥的所有密钥

Answer 3

感谢大家的投入。现在似乎已经解决了。在我之前通过setData（data）设置数据之前，但是当我更改为setData（{... data}）时起作用了！

反应useState不会触发子组件的重新渲染

3 个答案: