如何編輯動態生成的 state 的嵌套 state（使用 useState 掛鈎）？

Question

我正在嘗試修改 useState 的嵌套屬性，但在這種情況下我很難做到：

1. 該組件接收一個道具“訂單”，其中包含許多項目（line_items），這些項目是該訂單中的產品

2. useEffect 遍歷 line_items 並生成一個存儲在“editOrders”中的數組 state

   useEffect(() => { 如果 (order.line_items && order.line_items.length) { setEditOrders([]);

    order.line_items.forEach(item => { setEditOrders(prevState => [...prevState, { name: item.name, price: item.total, quantity: item.quantity, weight: '' } ]) }) } }, [])

3. 數組 state 中的項目“editOrders”以表格形式顯示

    <form onSubmit={(e) => handleSubmitChanges(e)}> { (editOrders.map((item, index) => ( <div style={{ display: "flex", flexDirection: "row", padding: "10px 30px", alignItems: "center" }}> <h5 style={{flex: 8}}>{item.name}</h5> <MDBox pt={2} pb={1} px={1} sx={{flex: 3}}> <MDInput type="text" variant="standard" label="Gewicht" disabled={loading && true} onChange={(e) => setEditOrders(e.target.value)} value={item.weight} /> </MDBox> /////// THIS IS WHERE THE PROBLEM IS <MDBox pt={2} pb={1} px={1} sx={{flex: 1}}> <FormControl variant="standard"> <Select value="kg" style={{height: 44}} label="Einheit" endAdornment={ <InputAdornment position="end"> <ArrowDropDown fontSize="medium" color="standard"/> </InputAdornment> } onChange={(e) => setEditOrders(prevState => ({...prevState, editOrders[index].weight: e.target.value }))} disabled={loading && true} > <MenuItem value="g">g</MenuItem> <MenuItem value="kg">kg</MenuItem> <MenuItem value="ml">ml</MenuItem> <MenuItem value="cl">cl</MenuItem> <MenuItem value="l">l</MenuItem> <MenuItem value="Stück">Stück</MenuItem> </Select> </FormControl> </MDBox> </div> ))) } <MDBox pt={2} pb={3} px={3}> <MDButton type="submit" variant="gradient" color="info" disabled={disabled}> "Create" </MDButton> </MDBox> </form>

由於它是一個動態生成的列表，具體取決於 {order} 道具，我的目標是更改列表中該特定項目的 state。

謝謝！

Answer 1

那么你可以通過編寫一個 function 來獲取索引和值並像這樣更新 state 來做到這一點：

const handleOnChange = (event, index) => {
  setEditOrders((prevState) => {
    const newState = [...prevState];
    newState[index].weight = event.target.value;
    return newState;
  )
)

然后像這樣使用它：

<MDBox pt={2} pb={1} px={1} sx={{flex: 1}}>
  <FormControl variant="standard">
    <Select
      value="kg"
      style={{height: 44}}
      label="Einheit"
      endAdornment={
        <InputAdornment position="end">
          <ArrowDropDown fontSize="medium" color="standard"/>
        </InputAdornment>
      }
      onChange={(event) => handleOnChange(event, index)} 
      disabled={loading && true}
    >
      <MenuItem value="g">g</MenuItem>
      <MenuItem value="kg">kg</MenuItem>
      <MenuItem value="ml">ml</MenuItem>
      <MenuItem value="cl">cl</MenuItem>
      <MenuItem value="l">l</MenuItem>
      <MenuItem value="Stück">Stück</MenuItem>
    </Select>
  </FormControl>
</MDBox>

Answer 2

您首先復制數組，然后您可以安全地改變新數組。

onChange={(e) => setEditOrders(prevState => ({
  const prevOrder = prevState[index];
  const nextState = [...prevState];
  nextState[index] = { ...prevOrder, weight: e.target.value };
  return nextState;
}))}