React Edit 值未在动态输入中绑定 select

Question

我创建了一个动态输入 select 字段，在该字段中创建可编辑我尝试绑定一些预定义的数据但我设置了数据但它只需要索引但字段中的值不会更新。

我的代码：https://codesandbox.io/s/dynamic-select-update-n1k9v

输入字段数据

const [roomInputs, setRoomInputs] = useState([
    { boardBasic: "", roomType: "", adult: "", child: "" }
  ]);

要在输入字段中设置的预定义数据

const updateData = [
  {
    id: "1",
    boardBasic: "roomOnly",
    roomType: "Delux Room",
    adult: "2",
    child: "2"
  },
  {
    id: "2",
    boardBasic: "fullBoard",
    roomType: "Delux Room",
    adult: "2",
    child: "2"
  }
];
useEffect(() => {
    roomDataInput();
  }, []);

  const roomDataInput = () => {
    setRoomInputs(updateData);
  };

输入字段

<form onSubmit={handleSubmit}>
        {roomInputs.map((x, i) => (
          <div key={i}>
            <Grid container spacing={2}>
              <Grid item sm={12} lg={2} xs={12}>
                <Select
                  name="roomType"
                  placeholder="Room Type"
                  isSearchable
                  value={options.value}
                  options={options2}
                  onChange={(option) =>
                    handleRoomChangeType(option, i, "roomType")
                  }
                />
              </Grid>
              <Grid item lg={2} sm={12} xs={12}>
                <Select
                  name="boardBasic"
                  placeholder="Board Basic"
                  value={options.value}
                  onChange={(option) =>
                    handleRoomChangeBoard(option, i, "boardBasic")
                  }
                  options={BoardBasic}
                />
              </Grid>
              <Grid item sm={12} lg={2} xs={12}>
                <Select
                  name="adult"
                  placeholder="Adult"
                  value={options.value}
                  onChange={(option) =>
                    handleRoomChangeAdult(option, i, "adult")
                  }
                  options={options}
                />
              </Grid>
              <Grid item sm={12} lg={2} xs={12}>
                <Select
                  name="child"
                  placeholder="Child"
                  value={options.value}
                  onChange={(option) =>
                    handleRoomChangeChild(option, i, "child")
                  }
                  options={options}
                />
              </Grid>
              <Grid item sm={12} lg={2} xs={12}>
                {roomInputs.length !== 1 && (
                  <DeleteIcon
                    onClick={() => handleRemoveClickRoom(i)}
                    style={{
                      marginRight: "10px",
                      marginTop: "4px",
                      cursor: "pointer"
                    }}
                  />
                )}
                {roomInputs.length - 1 === i && (
                  <AddCircleOutlineIcon
                    onClick={handleAddClickRoom}
                    style={{ marginTop: "4px", cursor: "pointer" }}
                  />
                )}
              </Grid>
            </Grid>
          </div>
        ))}
        <Button type="submit" variant="contained" color="primary">
          Submit
        </Button>
      </form>

Answer 1

您应该将默认 state 值更改为 updateData 并删除 useEffect:

 const [roomInputs, setRoomInputs] = useState(updateData);

  // useEffect(() => {
  //   roomDataInput();
  // }, []);

同时为 map 中的所有 select 设置 defaultValue:

{roomInputs.map((x, i) => (
          <div key={i}>
            <Grid container spacing={2}>
              <Grid item sm={12} lg={2} xs={12}>
                <Select
                  defaultValue={options2.find((y) => y.value == x.roomType)}
                  name="roomType"
                  placeholder="Room Type"
                  isSearchable
                  value={options.value}
                  options={options2}
                  onChange={(option) =>
                    handleRoomChangeType(option, i, "roomType")
                  }
                />
              </Grid>
              <Grid item lg={2} sm={12} xs={12}>
                <Select
                  defaultValue={BoardBasic.find(
                    (y) => y.value === x.boardBasic
                  )}
                  name="boardBasic"
                  placeholder="Board Basic"
                  value={options.value}
                  onChange={(option) =>
                    handleRoomChangeBoard(option, i, "boardBasic")
                  }
                  options={BoardBasic}
                />
              </Grid>
              <Grid item sm={12} lg={2} xs={12}>
                <Select
                  defaultValue={options.find((y) => y.value == x.adult)}
                  name="adult"
                  placeholder="Adult"
                  value={options.value}
                  onChange={(option) =>
                    handleRoomChangeAdult(option, i, "adult")
                  }
                  options={options}
                />
              </Grid>
              <Grid item sm={12} lg={2} xs={12}>
                <Select
                  defaultValue={options.find((y) => y.value == x.child)}
                  name="child"
                  placeholder="Child"
                  value={options.value}
                  onChange={(option) =>
                    handleRoomChangeChild(option, i, "child")
                  }
                  options={options}
                />
              </Grid>
              <Grid item sm={12} lg={2} xs={12}>
                {roomInputs.length !== 1 && (
                  <DeleteIcon
                    onClick={() => handleRemoveClickRoom(i)}
                    style={{
                      marginRight: "10px",
                      marginTop: "4px",
                      cursor: "pointer"
                    }}
                  />
                )}
                {roomInputs.length - 1 === i && (
                  <AddCircleOutlineIcon
                    onClick={handleAddClickRoom}
                    style={{ marginTop: "4px", cursor: "pointer" }}
                  />
                )}
              </Grid>
            </Grid>
          </div>
        ))}

React Edit 值未在动态输入中绑定 select

React Edit values are not bind in dynamic input select

javascript

arrays

reactjs

react-select