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

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是异步方法，不能在setUserAnswer()之后立即获得userAnswer的更新值。

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

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

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

setState请参阅react文档。

Answer 2

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

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

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

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

看看Dan Abramov的这篇博客文章，它解释了我刚才说的