无法在onClick函数中访问状态属性更新值

Question

我正在使用React Hooks。在axios获取调用之后，我设置了状态属性questions。现在，当我点击一个按钮时，它的功能questions状态仍然是空的

const [questions, setQuestions] = useState([]);
const [customComponent, setCustomComponent] = useState(<div />);
useEffect(() => {
axios.get("urlhere").then(res => {
console.log(12, res.data);
setQuestions(res.data);
res.data.map(q => {
if (q.qualifyingQuestionId == 1) {
setCustomComponent(renderSteps(q, q.qualifyingQuestionId));
}
});
});
}, []);
const handleNext = i => {
console.log(32, questions); //questions is still an empty array here
};
const renderSteps = (step, i) => {
switch (step.controlTypeName) {
case "textbox":
return (
<div key={i}>
<input type="text" placeholder={step.content} />
<button onClick={() => handleNext(i)}>Next</button>
</div>
);
}
};
return <>{customComponent}</>;

我需要在这里使用减速器并将自定义组件放在另一个"文件"中吗？

Answer 1

setQuestions不会立即更新状态，您应该使用prevState来访问新值。

这里有一个沙盒，可以将您的代码与为什么它是空的解释相匹配>https://codesandbox.io/s/axios-useeffect-kdgnw

您也可以在这里阅读：为什么调用react setState方法没有'；不要立即改变状态？

Answer 2

最后我有了自己的解决方案

我将fetch函数中的数据传递给另一个组件作为道具

useEffect(() => {
axios.get('url')
.then((data) => {
setCustomComponent(<Questions questions={data} />)
})
}, [])