循环 AntDesign Row/Form；当从下拉列表中选择一个选项时，所有其他行值都会更改

Question

我有一个来自 Ant Design 的表单，在该表单中我循环遍历它的一部分以创建多行，但是当下拉列表中的一个值发生更改时 - 所有其他标签。在每一行中都发生了变化。实际值并没有保存到 seriesList 状态，它只是在下拉列表中显示相同的标签。

我在这里设置初始状态：

  const [seriesList, setSeriesList] = useState([
        {
            seriesId: uuidv4(),
            index: "watcher_events",
            color: "",
            type: "",
            meta: {
                watcher_name: "",
                watcher_type: "",
                watcher_id: ""
            },
            aggregation_field: "",
            filters: [{
                field: 'event_type',
                operator: 'is',
                value: ""
            }],
        },
    ]);

单击添加系列时添加新行的函数

    const handleAddClick = () => {
        setSeriesList([...seriesList, {
            seriesId: uuidv4(),
            index: "watcher_events",
            color: "",
            type: "",
            meta: {
                watcher_name: "",
                watcher_type: "",
                watcher_id: ""
            },
            aggregation_field: "",
            filters: [{
                field: 'event_type',
                operator: 'is',
                value: ""
            }],
        }]);
    };

使用所选颜色更新正确系列的函数。

    const handleColor = (e: any, index: any) => {
        const list = [...seriesList];
        list[index].color = e;
        setSeriesList(list);
    };

我正在循环显示并显示在下拉列表中的颜色选项列表。

export const chartColorOptionsV2 = [
    {
        label: 'Green',
        value: '#2AB596',
    },
    {
        label: 'Orange',
        value: '#F5A624',
    },
    {
        label: 'Sky Blue',
        value: '#53B9E9',
    },
    {
        label: 'Pink',
        value: '#E2507A',
    },
    {
        label: 'Navy',
        value: '#275FAD',
    }
];

表单所在的 JSX 和我正在循环的行：

 <Button icon={<PlusOutlined/>}
                            size={"large"}
                            onClick={handleAddClick}>Add Series</Button>
                    {seriesList.map((x, i) => {
                        return (
                            <Row
                                key={i}
                                wrap={false}
                                style={{
                                    marginTop: 5
                                }}>
                                <Form.Item
                                    name={"index"}
                                    key={`index: ${i}`}
                                    hasFeedback
                                    initialValue={x.index}
                                >
                                    <Select
                                        placeholder="Select an index"
                                        size={"large"}
                                        style={{
                                            width: 200
                                        }}
                                        onChange={(e: any) => handleIndex(e, i)}
                                    >
                                        {indexOptions.map((option) => (
                                            <Select.Option key={option.value + i}
                                                           value={option.value}>{option.label}</Select.Option>
                                        ))}
                                    </Select>
                                </Form.Item>
                                <Form.Item
                                    name={"watcher"}
                                    key={`watcher: ${i}`}
                                    hasFeedback
                                    rules={[{required: true, message: 'Please select a field'}]}
                                    className={styles.filterMenuWatcherType}
                                >
                                    <WaveValuesAutoComplete
                                        index={seriesList[i].index}
                                        field={determineIndex(seriesList[i].index)}
                                        dropdownMatchSelectWidth={400}
                                        style={{
                                            width: 200,
                                            marginLeft: 5
                                        }}
                                        size={"large"}
                                        showCount={true}
                                        onChange={(e: any) => handleWatcher(e, i)}
                                    />
                                </Form.Item>
                                <Form.Item name="color"
                                           key={`color: ${i}`}
                                           rules={[{required: true, message: 'Please select a color'}]}
                                           hasFeedback
                                >
                                    <Select
                                        key={`color: ${i}`}
                                        style={{
                                            width: 200,
                                            marginLeft: 5,
                                        }}
                                        placeholder="Select a color"
                                        size={"large"}
                                        onChange={(e: any) => handleColor(e, i)}
                                    >
                                        {chartColorOptionsV2.map((e: any) => (
                                            <Select.Option key={e.value + i} value={e.value}>{e.label}</Select.Option>
                                        ))}
                                    </Select>
                                </Form.Item>
                                {seriesList.length !== 1 &&
                                    <Tooltip title={"Click to remove this trace."}>
                                        <Button icon={<DeleteOutlined/>}
                                                size={"large"}
                                                style={{
                                                    width: 50,
                                                    marginLeft: 5,
                                                }}
                                                onClick={() => handleRemoveClick(i)}
                                        />
                                    </Tooltip>}
                            </Row>
                        );
                    })}
                    <div style={{marginTop: 20}}>{JSON.stringify(seriesList)}</div>
                    <Divider/>
                    <Form.Item>
                        <Button type="primary"
                                htmlType="submit"
                                size={"large"}
                        >
                            Add Chart
                        </Button>
                    </Form.Item>
                </Form>
            </Space>

Answer 1

<Form.Item name="color"。我没有错，这是导致问题的原因。由于每一行中的字段具有相同的 name，因此当您更改任何一个时，它会更改所有其他字段。当你用 <Form.Item> 包装任何字段并添加 name 属性时，antd Form 控制该字段。为了修复它，请确保每个字段都有不同的名称，即 name={`color_${index}`}，或者如果您控制每个字段值并处理其 onChange 函数，则只需从 Form.Item 中删除名称。 希望这会解决您的问题