React中如何填充动态长度同值数组并正确传参操作数组元素

1. 动态初始化cantidad数组 #

因为libros是从Firebase异步请求获取的，组件初始化时libros是空数组，直接在useState里读取libros.length拿不到正确值，需要在请求到数据的回调里同步初始化cantidad，修改useEffect逻辑如下：

useEffect(() => {
  queryRef.orderBy("precio")
  .get()
  .then((snapshot) => {
    const tempData = [];
    snapshot.forEach((doc) => {
      const data = doc.data();
      tempData.push(data);
    });
    setLibros(tempData);
    // 同步初始化数量数组，长度和商品列表一致，初始值全为1
    setCantidad(new Array(tempData.length).fill(1));
  });
}, []);

2. 修正加减数量的处理函数 #

你之前的写法是直接把整个cantidad数组替换成了单个数值，正确的做法是拷贝原数组，仅修改对应索引位置的值，同时用函数式更新避免闭包导致的状态旧值问题：

const mas = (index) => {
  setCantidad(prevCantidad => {
    // 拷贝原数组避免直接修改状态违反React不可变原则
    const newCantidad = [...prevCantidad];
    newCantidad[index] += 1;
    return newCantidad;
  })
};

const menos = (index) => {
  setCantidad(prevCantidad => {
    const newCantidad = [...prevCantidad];
    if (newCantidad[index] > 0) {
      newCantidad[index] -= 1;
    } else {
      window.alert("Sorry, Zero limit reached");
    }
    return newCantidad;
  })
};

3. 可选优化点 #

• 价格计算逻辑调整，避免字符串运算异常：
  原写法${parseFloat(l.precio).toFixed(2) * cantidad[index]}中toFixed返回的是字符串，建议调整为：

  ${(parseFloat(l.precio) * cantidad[index]).toFixed(2)}
  

• 复选框如果要做受控组件，需要额外声明一个状态数组存储每个商品的选中状态，逻辑和cantidad数组同理。

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