Question

我只是想知道为什么在渲染之前状态没有更新？

我正在创建一个电影列表应用程序，现在我正在尝试列出票房电影。但是在渲染之前状态似乎没有更新。

我是 React 和 js 的新手，我真的很感激一些帮助和解释为什么会发生这种情况

const BoxOffice = () => {
  const [data, setData] = useState([]);

  const getBoxOffices = async () => {
    var options = {
      method: "GET",
      url: "https://movies-tvshows-data-imdb.p.rapidapi.com/",
      params: { type: "get-boxoffice-movies", page: "1" },
      headers: {
        "x-rapidapi-key": "4ccc11616emsha0ff93487313f1ep1528a9jsnf24cc1750061",
        "x-rapidapi-host": "movies-tvshows-data-imdb.p.rapidapi.com",
      },
    };

    axios
      .request(options)
      .then((response) => {
        console.log(response.data.movie_results);
        const boxOfficeMovies = response.data.movie_results;
        setData(boxOfficeMovies);
      })
      .catch((error) => {
        console.error(error);
      });
  };

  const getfullData = async () => {
    getBoxOffices();
    console.log("data", data);
  };

  useEffect(() => {
    getfullData();
  }, []);


  return (
    <div>
      <div className="min-h-screen w-screen bg-gray-300 pt-12">
        <div className="min-w-auto grid grid-flow-row grid-cols-5 gap-4 items-center justify-center mt-5">
          <div className="w-screen bg-red-50">
            {data && <Card data={data} />}
          </div>
        </div>
      </div>
    </div>
  );
};

export default BoxOffice;```

Answer 1

这是 React 组件挂载的正常流程。就像在基于类的组件中一样，在 constructor() 之后，执行 render，然后是 componentDidMount，然后是其他生命周期方法。同样，在函数组件中，jsx 返回被视为渲染，因此它在任何其他生命周期方法之前运行，在这种情况下是 useEffect()，所以这个钩子将在之后运行，无论它是否被用作didMount 或 didUpdate。还要记住 setState() 及其替代方法是异步的，它们不会立即执行，即没有阻塞性质。因此需要这样一种方法，可以在状态改变时立即提示我们。

反应状态在渲染前未更新

1 个答案: