React map遍历中如何获取数组索引并修改指定位置的状态值

1. 初始化和数据源长度一致的全1数组 #

你需要的写法可以直接实现，只要确保初始化时books已经拿到完整数据，直接在useState中声明即可：

// books是你遍历的数据源，长度不固定
const [amount, setAmount] = useState(Array(books.length).fill(1));

如果books是异步请求获取的，不是组件初始化就存在的，需要增加useEffect同步数组长度：

useEffect(() => {
  setAmount(Array(books.length).fill(1));
}, [books])

2. 正确修改数组指定索引的值 #

你之前的加减方法错误点在于：直接把单个数值传给setAmount，会把整个数组状态直接覆盖为数字，导致后续渲染时取amount[index]报错。React要求状态修改遵循不可变原则，你需要先拷贝原数组，修改对应位置的值后再整体替换状态：

const plus = (index) => {
  setAmount(prev => {
    const newAmount = [...prev]; // 拷贝原数组避免修改原状态
    newAmount[index] += 1;
    return newAmount;
  })
}

const minus = (index) => {
  setAmount(prev => {
    const newAmount = [...prev];
    if (newAmount[index] > 0) {
      newAmount[index] -= 1;
    } else {
      window.alert("Sorry, Zero limit reached");
      // 不要把整个数组设为0，保持其他位置的值不变，当前位置保持0即可
    }
    return newAmount;
  })
}

3. 渲染部分调整建议 #

你写的map遍历取索引、给按钮绑定点击事件传递索引的逻辑是正确的，只需要补充少量细节即可避免警告、保证计算精度：

{books.map((l, index) => (
  <tr key={index}> {/* 新增key值避免React渲染警告 */}
    <td>
      <button onClick = {() => plus(index)}/>
      {amount[index]}
      <button onClick = {() => minus(index)}/>
    </td>
    <td>{l.grado}</td>
    <td >
      <input onChange = {(event) => {
          let checked = event.target.checked;
      }} 
      type="checkbox" checked = "">
      </input>
      {l.descripcion}
    </td>
    <td >{l.editorial}</td>
    {/* 调整计算顺序，先乘再保留两位小数，避免精度问题 */}
    <td >${(parseFloat(l.precio) * amount[index]).toFixed(2)}</td>
  </tr>
))}

内容的提问来源于stack exchange，提问作者React Enjoyer