如何编辑动态生成的 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;
}))}