Question

标题上说的差不多。当我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>
  );
};

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，这意味着useEffect的值每次更改都会运行respos。

在React的文档中详细了解useStates and useEffects

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

2 个答案: