我正在尝试使用来自反应钩子的状态更新按钮按下时的胜利图表,如下所示:
const [weightData, setData] = useState([]);
const [date, setDate] = useState(new Date());
const [weight, setWeight] = useState(150);
图表采用 weightData 的位置
<VictoryLine
style={{
data: { stroke: "red" },
parent: { border: "1px solid #ccc" },
}}
data={weightData}
/>
并在按钮按下时更新该数据,如下所示:
const addWeight = () => {
setData(prevData => {
return [{x: date, y: weight}, ...prevData];
});
}
<Button
color="red"
onPress={addWeight}
title="Add"
/>
我对这种方法的问题是渲染似乎落后于大约 3 次按钮点击。我觉得这与更新异步状态有关,但是,我尝试的修复都没有奏效。使用开发工具检查显示状态每次都使用正确的对象进行更新,但是图表似乎落后了 3 次更新。任何关于如何在按钮按下时做出反应渲染的建议将不胜感激。