获取数据后：新状态未定义[重复]答案

【问题标题】：After fetching data: new state is undefined [duplicate]获取数据后：新状态未定义[重复]
【发布时间】：2021-01-08 03:58:26
【问题描述】：

我正在成功获取数据。我得到的数据是这样的：

{message: "Success", savedAnswer {Question1: "Yes", Question2: "Yes"}}

问题：当我尝试更新状态时，我的控制台中出现“未定义”状态。

这是我的代码：

const [redirectOnLogin, setRedirectOnLogin] = useState(false);
const [loginLoading, setLoginLoading] = useState(false);
const [userAnswer, setUserAnswer] = useState([]);


const submitAnswers = async (answers) => {
    try {
      setLoginLoading(true);
      const { data } = await axios.post(
        `signupQuestions`,
        answers
      );   
  
      console.log(data.savedAnswer) //works properly
      setUserAnswer(data.savedAnswer);  
      console.log(userAnswer) //undefined

      setTimeout(() => {
        setRedirectOnLogin(true);
      }, 700);
    } catch (error) {
      setLoginLoading(false);
      const { data } = error.response;
    }
  };

当我 console.log(data) 一切正常（参见代码），但是当我更新状态和 console.log(userAnswer) 时，我得到“未定义”。

我认为这与渲染有关？我已经尝试在代码中添加条件，例如：

if (data.savedAnswer !== undefined) {
setUserAnswer(data.savedAnswer)
}

..但我无法让它工作。任何帮助表示赞赏！谢谢！！

【问题讨论】：

标签： javascript reactjs async-await react-hooks

【解决方案1】：

setUserAnswer 是异步方法，不能在setUserAnswer() 之后立即获取userAnswer 的更新值。

setUserAnswer(data.savedAnswer);  
console.log(userAnswer) //This will console old value of `userAnswer`

您应该使用 useEffect 并添加 userAnswer 作为 useEffect 挂钩的依赖项。这将在每次更新时 console.log 记录 userAnswer 值。

useEffect(() => {
  console.log(userAnswer);
}, [userAnswer]);

Refer react doc 用于 setState。

【讨论】：

谢谢。该代码有效 - 我尝试了类似的东西，但我错误地使用了 useEffect ..这是有道理的。

【解决方案2】：

每个渲染都有自己的状态变量值（使用 useState 创建）。

调用 setUserAnswer 会触发具有新值的新渲染，并且在新渲染中新值可用（由 useState 返回），但在原始渲染中变量保持不变。

内部反应比较原始和下一个渲染的状态引用以确定是否有任何更改（例如，当您将变量传递给 useEffect 依赖数组时）。

William Wang的回答提供的代码会起作用，因为下一次渲染会发现传入useEffect依赖数组的值不同，会在下一次渲染的范围内执行console.log。

请参阅this blog post from Dan Abramov，它解释了我刚才所说的内容

【讨论】：

感谢您的详细解释和链接。这很有帮助！