Блог

Я пытаюсь обновить диаграмму победы при нажатии кнопки, используя состояние из хука реакции следующим образом:

 const [weightData, setData] = useState([]);
const [date, setDate] = useState(new Date());
const [weight, setWeight] = useState(150);
  

Где диаграмма принимает весовые данные

 <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 обновления. Любые предложения о том, как заставить реагировать на нажатие кнопки, будут с благодарностью приняты.