时间戳

首页 > 解决方案 > React Native 未在更改状态上呈现胜利原生图表

javascript - React Native 未在更改状态上呈现胜利原生图表

问题描述

我正在尝试使用来自反应钩子的状态更新按钮按下时的胜利图表，如下所示：

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 次更新。任何关于如何在按钮按下时做出反应渲染的建议将不胜感激。

标签： javascriptreact-nativevictory-native

解决方案

推荐阅读