React中动态Select字段值变更影响所有字段的问题求助

问题根源 #

1. 所有动态生成的区块复用了同一个conditionIndex作为标识，导致每个区块的name属性完全相同，状态更新时会批量修改所有区块的对应值
2. selectValue和operatorValue初始化为空字符串""，不符合存储多组键值对的需求
3. 列表映射时使用conditionIndex作为组件key，React无法正确区分不同区块，导致渲染逻辑混乱

修改后的完整代码 #

import React from "react";
import ReactDOM from "react-dom";
import { Pane, Button, Heading, SelectField } from "evergreen-ui";

function SelectFieldExample() {
  // 初始化状态为对象，用于存储多组选择值
  const [selectValue, setSelectValue] = React.useState({});
  const [operatorValue, setOperatorValue] = React.useState({});
  const [numberOfConditions, setNumberOfConditions] = React.useState(1);

  const handleSelect = (e) => {
    const { name, value } = e.target;
    setSelectValue(prev => ({
      ...prev,
      [name]: value
    }));
  };

  const handleOperator = (e) => {
    const { name, value } = e.target;
    setOperatorValue(prev => ({
      ...prev,
      [name]: value
    }));
  };

  const onAddCondition = () => {
    setNumberOfConditions(prev => prev + 1);
  };

  return (
    <Pane maxWidth={654}>
      <Pane width={900}>
        <form>
          <Pane display="flex" flexDirection="column" gap={25}>
            <Heading>Conditions</Heading>
            <Pane marginTop={-15}>
              {Array.from(Array(numberOfConditions)).map((_, index) => (
                <Pane
                  key={index}
                  marginTop={-10}
                  display="flex"
                  alignItems="center"
                  gap={10}
                >
                  <SelectField
                    minWidth={180}
                    value={selectValue[`conditions[${index}][field_id]`] || ""}
                    onChange={handleSelect}
                    name={`conditions[${index}][field_id]`}
                  >
                    <optgroup label="Data">
                      <option value="tag">Tag</option>
                      <option value="events">Event</option>
                    </optgroup>
                  </SelectField>

                  <SelectField
                    minWidth={180}
                    value={operatorValue[`conditions[${index}][operator]`] || ""}
                    onChange={handleOperator}
                    name={`conditions[${index}][operator]`}
                  >
                    {selectValue[`conditions[${index}][field_id]`] === "events" && (
                      <option value="Event">Event</option>
                    )}
                    {selectValue[`conditions[${index}][field_id]`] === "tag" && (
                      <option value="Tag">Tag</option>
                    )}
                  </SelectField>
                </Pane>
              ))}
            </Pane>
          </Pane>
        </form>

        <Button
          width={110}
          onClick={onAddCondition}
          marginRight={12}
          size="medium"
        >
          Add condition
        </Button>
      </Pane>
    </Pane>
  );
}

ReactDOM.render(<SelectFieldExample />, document.getElementById("root"));

关键修改说明 #

• 移除了冗余的conditionIndex状态，直接使用映射时的index作为每个区块的唯一标识
• 将selectValue和operatorValue初始化为空对象，确保能存储多组独立的选择值
• 每个Select的name属性通过当前区块的index生成，保证每个字段的唯一性
• 修正了Select组件的value绑定逻辑，确保每个区块显示自身对应的选择值
• 第二个Select的选项判断逻辑改为依赖当前区块的selectValue，实现区块间的独立联动

内容的提问来源于stack exchange，提问作者idir