Question

我要在OrderContent组件中的道具上获取一些产品，以在select组件中使用它们，当我在select中选择产品时，它会呈现Summary和Product组件，在这些组件中，我可以选择数量并以此计算全部返回到OrderContent组件上，问题是当我尝试在输入类型（在Product组件上）上使用OnChange时，useEffect（内部是用于计算状态总数的函数）不会触发，但是如果我从州添加产品或将其删除。

data_name_list

Answer 1

updateQuantity处于变异状态。这意味着react将看到您尝试使用相同的对象引用来更新状态，并且将跳过重新渲染，这意味着没有useEffect触发器。

将其更改为带有新嵌套对象的新数组：

const updateQuantity = (val,index)=>{
  const tempProds = [...productsSelected.map(val => {...val})];
  tempProds[index].quantity= Number(val);
  setProductsSelected(tempProds)
}

deleteProduct不会发生突变，因为filter返回了一个新数组。但是完全不需要设置tempProds。

updateTotal也会改变状态，但只会改变其嵌套对象。因此，仍然需要解决此问题，但可能不会导致相同的重新渲染问题。

基于在多个地方使用const tempProds = productsSelected，我认为您应该对JavaScript对象的分配和引用方式进行一些研究。有很多资源，但是作为this answer的一部分，我写了一个非常详细的说明。

Answer 2

如果productsSelected是同一数组，则useEffect无法检测到更改，因为它始终指向同一对象

const selectProduct = (prod)=>{
  setProductsSelected([...prod])
}

强制选择的产品为新阵列

useEffect不是由onChange触发的

2 个答案: