Reactjs 如何按子项更新状态'；子列表上的索引

我有一个简单的项目列表，如下所示：

const nodeList = Array.from({length:10}, (_,i) => i + 1)
const Counter = () => {
    
    const [count, setCount] = React.useState(0)  
    return (
      <div>
       {nodeList.map((node,i) => (
          <div key={i}>
            <button 
              onClick={() => {
                setCount(prev => prev + 1)
              }}
            >
              Sum up
            </button>
            <span>{count}</span>
          </div>
        ))}
        
      </div>
    )
  }

const [count, setCount] = useState({});

  const handleClick = (i) => {
    setCount({ ...count, [i]: 1 });
  };
  return (
    <div className="App">
      {nodeList.map((node, i) => (
        <div key={i}>
          <button
            onClick={() => {
              handleClick(i);
            }}
          >
            Sum up
          </button>
          <span>{count[i]}</span>
        </div>
      ))}
    </div>
  );

const nodeList=Array.from（{length:10}，（{u，i）=>i+1）
常量计数器=（）=>{
const[count，setCount]=React.useState（0）
返回(
{nodeList.map（（节点，i）=>(
{
设置计数（上一个=>上一个+1）
}}
>
总结
{count}
))}
)
}

但是，当我单击“求和”时，所有元素的计数值都是相同的，如何使用子元素的键或索引获取列表中每个子元素的独立计数值

我想尝试另一种方法，而不是使用单个数字，我想使用一个对象并根据单击的项目创建状态，类似这样：

const nodeList = Array.from({length:10}, (_,i) => i + 1)
const Counter = () => {
    
    const [count, setCount] = React.useState(0)  
    return (
      <div>
       {nodeList.map((node,i) => (
          <div key={i}>
            <button 
              onClick={() => {
                setCount(prev => prev + 1)
              }}
            >
              Sum up
            </button>
            <span>{count}</span>
          </div>
        ))}
        
      </div>
    )
  }

const [count, setCount] = useState({});

  const handleClick = (i) => {
    setCount({ ...count, [i]: 1 });
  };
  return (
    <div className="App">
      {nodeList.map((node, i) => (
        <div key={i}>
          <button
            onClick={() => {
              handleClick(i);
            }}
          >
            Sum up
          </button>
          <span>{count[i]}</span>
        </div>
      ))}
    </div>
  );

const[count，setCount]=useState（{}）；
常量handleClick=（i）=>{
setCount（{…count，[i]：1}）；
};
返回(
{nodeList.map（（节点，i）=>(
{
handleClick（i）；
}}
>
总结
{count[i]}
))}
);

---

现在，如何增加每个元素的计数器？

问题是您的状态未初始化。因此，

count[i]

是未定义的，不会呈现，并且

undefined+1

返回

NaN

以下是修复问题的代码沙盒：

---

我使用

count[I]|0

返回

0

如果count是“falsy”（），并更改

setCount（{…count[I]：1}）

to

setCount（{…count[i]：（count[i]| 0）+1}）
问题在于您的状态未初始化。因此，
count[i]
是未定义的，不会呈现，并且
undefined+1
返回
NaN

以下是修复问题的代码沙盒：

我使用
count[I]|0
返回
0
如果count是“falsy”（），并更改
setCount（{…count[I]：1}）
to
setCount（{…count[i]：（count[i]| 0）+1}）
最好使用
useState
将
listItem
状态创建为一个数组，并使用
index
对其进行更新


确保创建一个克隆数组并从
设置
函数返回，因为如果在同一数组中进行更改，它将不会反映


从“react”导入{useState}；
常量计数器=（）=>{
const[listItem，setListItem]=useState（数组（10）.fill（0））；
函数增量（索引）{
setListItem（（上一个）=>{
const clone=[…prev]；
克隆[索引]+=1；
返回克隆；
});
}
返回(
{listItem.map（（节点，i）=>(
增量（i）}>总和
{node}
))}
);
};
导出默认计数器；
最好使用
useState
将
listItem
状态创建为一个数组，并使用
index
对其进行更新


确保创建一个克隆数组并从
设置
函数返回，因为如果在同一数组中进行更改，它将不会反映


从“react”导入{useState}；
常量计数器=（）=>{
const[listItem，setListItem]=useState（数组（10）.fill（0））；
函数增量（索引）{
setListItem（（上一个）=>{
const clone=[…prev]；
克隆[索引]+=1；
返回克隆；
});
}
返回(
{listItem.map（（节点，i）=>(
增量（i）}>总和
{node}
))}
);
};
导出默认计数器；
您的代码对所有元素只增加一个计数。我想你应该这样做
nodeList.map（（node，i）=>（setCount（prev=>prev+i）}>求和{count}））
您的代码只为所有元素增加一个计数。我想你应该这样做
nodeList.map（（node，i）=>（setCount（prev=>prev+i）}>Sum{count}））