React State 在渲染之前没有更新答案

【问题标题】：React State not updating before the renderingReact State 在渲染之前没有更新
【发布时间】：2021-09-21 12:58:20
【问题描述】：

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

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

我是新来的反应和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;```

【问题讨论】：

标签： javascript reactjs api use-state

【解决方案1】：

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

【讨论】：

感谢您的澄清。