Reactjs 反应状态数组更新

我尝试了一些方法，但根本无法更新此数组的状态。我相信我很接近，但有人能看一下，告诉我我做错了什么吗。谢谢

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

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

---

我怀疑您调用的

handleCalculations

不正确。 你很可能会这样使用它

<button onClick={handleCalculations}>click me</button>

<button onClick={()=>handleCalculations(12,1)}>click me</button>

尝试向处理程序传递正确的参数，如下所示

<button onClick={handleCalculations}>click me</button>

<button onClick={()=>handleCalculations(12,1)}>click me</button>

handleCalculations（12,1）}>单击我

这应该可以解决问题

---

根据您的逻辑将参数替换到函数中。

我怀疑您调用的

handleCalculations

不正确。 你很可能会这样使用它

<button onClick={handleCalculations}>click me</button>

<button onClick={()=>handleCalculations(12,1)}>click me</button>

尝试向处理程序传递正确的参数，如下所示

<button onClick={handleCalculations}>click me</button>

<button onClick={()=>handleCalculations(12,1)}>click me</button>

handleCalculations（12,1）}>单击我

这应该可以解决问题

---

根据您的逻辑将参数替换到函数中。

乍一看，我觉得还可以。你能演示一下你是如何连接

手工计算的吗？可能
value
是一个字符串，因此您将加法与串联混合在一起？@kevin3954您将其描述为一个数组，但代码显示的是一个非数组对象。两者都有可能，但你能澄清你想要哪一个吗？到底出了什么问题？状态是否得到更新？您能否确认它使用预期的输入命中您的
handleCalculations
函数？（例如，添加一个
控制台.log
）是，它点击该功能。控制台日志将键和值都显示为整数。什么都没有更新过你是怎么确认“什么都没有更新”的？通过检查用户界面？我会在
返回
函数之前查看console.log（totals）

，这样您就可以在每次重新渲染时检查原始状态。另外，您的原始对象是

1-12

，但您正在渲染

0-11

，因此这可能会有问题。乍一看，我觉得还可以。你能演示一下你是如何连接

手工计算的吗？可能
value
是一个字符串，因此您将加法与串联混合在一起？@kevin3954您将其描述为一个数组，但代码显示的是一个非数组对象。两者都有可能，但你能澄清你想要哪一个吗？到底出了什么问题？状态是否得到更新？您能否确认它使用预期的输入命中您的
handleCalculations
函数？（例如，添加一个
控制台.log
）是，它点击该功能。控制台日志将键和值都显示为整数。什么都没有更新过你是怎么确认“什么都没有更新”的？通过检查用户界面？我会在
返回
函数之前查看console.log（totals）

，这样您就可以在每次重新渲染时检查原始状态。另外，您的原始对象是

1-12

，但您正在渲染

0-11

，因此这可能会有问题。这个答案在某种程度上是正确的。但是关于@kevin3954提供的当前代码，他将

handeCalculations

传递给

Row

组件。所以在这个组件中，他可以说：``props.handleCalculations（12，1）}/>``@kevin3954，谢谢你完成了你的问题。我可以请你做一个最小的可复制的例子，并张贴在上面吗？我会这样做的。谢谢你的帮助@WilfredMulenga，你是对的，你更新了值。但是，我需要它更新一个值，该值稍后将在useEffect内部的子元素中指定。1的值只是一个测试值，看看我是否可以更新它。12的钥匙也会传给孩子。也许我看错了。也许有更好的方法来完成我想要完成的事情。我还没有反应过来。PHP是我的背景。我将把这个例子发布到codesandbox上，看看我是否有更多的道理。谢谢大家Drew Reese将handleCalculations传递给Row，Row将其传递给循环中的DateField/TableCell，TableCell在安装组件时调用它。您已经在一个循环中将一组状态更新排队，它们都是从它们排队的渲染周期的相同当前状态更新的。解决方案使用功能状态更新将每个更新排队，并使每个更新来自上一个计算状态，而不是来自上一个渲染周期的状态。const handleCalculations=（key，value）=>{setTotals（totals=>（{…totals[key]：totals[key]+value}））；}；这个答案在某种程度上是正确的。但是关于@kevin3954提供的当前代码，他将

handeCalculations

传递给

Row

组件。所以在这个组件中，他可以说：``props.handleCalculations（12，1）}/>``@kevin3954，谢谢你完成了你的问题。我可以请你做一个最小的可复制的例子，并张贴在上面吗？我会这样做的。谢谢你的帮助@WilfredMulenga，你是对的，你更新了值。但是，我需要它更新一个值，该值稍后将在useEffect内部的子元素中指定。1的值只是一个测试值，看看我是否可以更新它。12的钥匙也会传给孩子。也许我看错了。也许有更好的方法来完成我想要完成的事情。我还没有反应过来。PHP是我的背景。我将把这个例子发布到codesandbox上，看看我是否有更多的道理。谢谢大家Drew Reese将handleCalculations传递给Row，Row将其传递给循环中的DateField/TableCell，TableCell在安装组件时调用它。您已经在一个循环中将一组状态更新排队，它们都是从它们排队的渲染周期的相同当前状态更新的。解决方案使用功能状态更新将每个更新排队，并使每个更新来自上一个计算状态，而不是来自上一个渲染周期的状态。const handleCalculations=（key，value）=>{setTotals（totals=>（{…totals[key]：totals[key]+value}））；}；