通过防护行/形式循环；当从下拉列表中选择选项时，所有其他行值都会更改

Question

我有一个来自ANT设计的表格，在形式的内部，我正在循环通过它的一部分来创建多行，但是当一个值在下拉列表中更改时 - 所有其他标签。在每一行中更改。实际值不能保存到串联列表状态，它只是在下拉列表中显示相同的标签。

我在此处设置初始状态：

  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

＆lt; form.item name =“ color”。我没错，这是由于问题引起的。由于您对每行的字段具有相同的名称，因此当您更改任何一个时，它将更改其他所有内容。将任何字段用＆lt; form.item＆gt;和添加name属性包装时，ANTD表单控制该字段。为了修复它，请确保每个字段都有不同的名称IE name = {{color _ $ {index}`}，或者如果您要控制每个字段值并处理其on Change函数，则只需删除来自Form.Item的名称。
希望这能解决您的问题