Question

我正在成功获取数据。我取回的数据如下所示：

{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)
}

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

Answer 1

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

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

您应该使用 useEffect 并添加一个 userAnswer 作为 useEffect 钩子的依赖项。这将在每次更新时控制台.记录 userAnswer 值。

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

Refer react doc 用于 setState。

Answer 2

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

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

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

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

见NoSuchElementException, Selenium unable to locate element解释我刚才所说的

获取数据后：新状态未定义

2 个答案: