ReactJS，用處理程序更新 State 但數據為空

Question

我有這種情況：

我想更新一些 state （數組），它用於 map 不同的 React 組件。

這些組件有自己的handleUpdate 。

但是當我調用handleUpdate時，我需要使用的 state 是空的。 我認為是因為每個處理程序方法都在 state 填充數據之前安裝，但是，我如何確保或使用處理程序中的數據？ 換句話說，處理程序需要更新填充它自己的 state 的 state：

const [data, setData] = useState([]);
const [deliver, setDeliver] = useState({items: []});

const handleUpdate = (value, position) => {
  // This set works
  setDeliver({
    items: newItems
  });
  // This doesn't work because "data" is an empty array - CRASH
  setData(data[position] = value);
};

useEffect(() => {
  const dataWithComponent = originalData.map((item, i) => ({
    ...item,
    entregado: <SelectorComponent
      value={deliver?.items[i].delivered}
      key={i}
      onUpdate={(value) => handleUpdate(value, i)}
    />
    }));
    setData(dataWithComponent); // This is set after <SelectComponent is created...
  }
}, [originalData]);

Answer 1

您傳遞的值不是來自originalData ，因此 onUpdated 不知道它的value

您使用 map 在 originalData 上運行，因此您需要將 item.somthing 傳遞給 onUpdate function

const dataWithComponent = originalData.map((item, i) => ({
    ...item,
    entregado: <SelectorComponent
      value={deliver?.items[i].delivered} // you can't use items use deliver.length > 0 ? [i].delivered : ""
      key={i}
      onUpdate={() => handleUpdate("here you pass item", i)}
    />
    }));

Answer 2

我不確定，但我認為你可以做類似的事情。 我希望你有一些想法來解決它。

 // This doesn't work because "data" is an empty array - CRASH let tempData = [...data]. tempData[position] = value; setData(tempData);