Одним нажатием кнопки я могу корректно обновить свое состояние из дочернего компонента. Однако кнопка для меня не очень полезна. Мне нужно, чтобы состояние обновлялось с дочернего дочернего компонента на функцию, которая запускается из родительского компонента. Я довольно новичок в React, но это обновление состояния бросает мне вызов.

В родительском функциональном компоненте у меня есть массив состояний, подобный этому

 const [totals, setTotals] = useState({
    0: 0,
    1: 0,
    2: 0,
    3: 0,
    4: 0,
    5: 0,
    6: 0,
    7: 0,
    8: 0,
    9: 0,
    10: 0,
    11: 0
});

const handleCalculations = (key, value) => {
    setTotals({
        ...totals,
        [key]:  totals[key]   value
    });
}
 

Я поддерживаю вычисления обработки до дочернего компонента, который передает его другому дочернему компоненту, где выполняются некоторые вычисления и передаются обратно родительскому элементу через useEffect. Это выглядит так…

 useEffect(() => {
    handleCalculations(index, paycheckCount);
}, []);
 

Однако состояние никогда не обновляется, за исключением 11-го индекса массива состояний, который получает 2. Кто-нибудь, пожалуйста, может помочь мне понять, что я делаю неправильно. Я включил ссылку на codesandbox с полным кодом, чтобы вы могли видеть весь код. Любая помощь приветствуется

https://codesandbox.io/live/rwrr68f

Проблема

Вы переходите handleCalculations к Row which, который передает его в DateField / TableCell внутри цикла и TableCell вызывает его при монтировании компонента. Вы фактически поставили в очередь кучу обновлений состояния в цикле, и все они обновляются из того же текущего состояния цикла рендеринга, в котором они поставлены в очередь.

Решение

Используйте обновление функционального состояния для постановки в очередь каждого обновления и обновления каждого из предыдущего вычисленного состояния, а не состояния из предыдущего цикла рендеринга.

 const handleCalculations = (key, value) => {
  console.log(key);
  console.log(value);
  setTotals(totals => ({
    ...totals,
    [key]: totals[key]   value
  }));
};
 

Примечание: это, по-видимому, приводит к недопустимому числовому вычислению, поэтому вы можете защититься NaN с [key]: totals[key] value || 0 помощью . Я думаю, это связано с тем, что вы смешиваете, используя сопоставленный индекс и ключи объекта, т. Е. Ваше totals состояние является объектом, но оно не индексируется с нулевым индексом, как массив.