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

Question

标题上的内容差不多。当我 console.log(repos) 它 returns 一个空数组。为什么 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>
  );
};

Answer 1

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

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

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

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

Answer 2

答案很简单。您的 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，这意味着每当 respos 的值发生变化时，useEffect 将运行。

在 React 的文档中阅读有关 useStates and useEffects 的更多信息

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

useState setter not updating state when called in useEffect

reactjs

use-state