在 useEffect 中调用 useState setter 时不更新状态答案

【问题标题】：useState setter not updating state when called in useEffect在 useEffect 中调用 useState setter 时不更新状态
【发布时间】：2021-01-17 21:31:26
【问题描述】：

和标题上说的差不多。当我 console.log(repos) 它返回一个空数组。为什么repos 状态没有更新？

import React, { useEffect, useState } from "react";
import axios from "axios";

export default () => {
  const [repos, setRepos] = useState([]);
  useEffect(() => {
    (async () => {
      try {
        let repo_lists = await axios.get(
          "https://api.github.com/users/Coddielam/repos"
          // { params: { sort: "created" } }
        );
        setRepos(repo_lists.data.slice(1).slice(-10));
        console.log(repo_lists.data.slice(1).slice(-10));
        console.log(repos);
      } catch (err) {
        setRepos([
          "Something went wrong while fetching GitHub Api./nPlease use the link below to view my git repos instead ",
        ]);
      }
    })();
  }, []);

  return (
    <div className="content">
      <h2>View my recent git repos:</h2>
      <ul>
        ...
      </ul>
    </div>
  );
};

【问题讨论】：

设置状态的行为本质上是异步的，所以它不会立即设置状态。

标签： reactjs use-state

【解决方案1】：

答案很简单。你的useState 正在更新……相信我。之所以console.log() 看不到是因为SetRespos 是一个异步函数。

基本上当你声明一个函数来更新你的useState 值时，react 会将它用作async 函数

示例

const [example, setExample] = useState('');

useEffect(() => {
  
  setExample('Hello');
  console.log('I'm coming first'); // This will be executed first
  console.log(example); // This will come after this

}, [])

输出将是：

  I'm coming first
  // Blank Line

但您的useState 仍然会在此之后更新。如果你想看到这样做：

 useEffect(() => {

  console.log(respose); // This will give you the value
}, [respos])

我使用单独的useEffect 到console.log() 的值。在[]（依赖数组）中我们传递respos，这意味着useEffect将在每次respos的值发生变化时运行。

在 react 的文档中了解更多关于 useStates and useEffects 的信息

【讨论】：

【解决方案2】：

状态更新是异步的。您只会看到它们反映在下一次渲染中。如果您在调用 setState 后立即通过控制台记录状态，它将始终记录当前状态，而不是未来状态。

您可以在每次更改时将状态记录在效果中，并且您会看到它在更改：

useEffect(() => console.log(repos), [repos]);

此效果将在应用状态更新后调用。

【讨论】：