Javascript 表单错误地记住并报告表单列表中字段的过去值

我在

表单中有一些行。List

根据状态变量呈现两个输入字段之一。状态变量通过使用按钮进行切换。问题是，当我在输入字段（当前呈现的两个字段之一）中输入值时，当我查看

onValuesChange

方法的

allValues

参数中的值时，我发现在另一个输入字段中输入的最后一个值（当前未在DOM上呈现）继续有报道

我提供以下最小复制示例：

代码（完整性）也在文章末尾提供

复制步骤

查看github回购协议

执行

npm安装

使用

npm启动

在标有“a”的输入字段中键入一些字符

单击按钮在不同的输入字段中输入值 标记为“b”

现在在输入字段中键入一些字符，然后 观察

控制台日志

输出

人们期望什么？ onValuesChange（登录到控制台）中的allValues参数只包括标记为“b”的输入字段中的值（因为此时DOM上不存在标记为“a”的输入字段）

到底发生了什么？ 在“onValuesChange”的allValues参数中也会报告输入到标记为“a”的输入字段中的过去值`

我也在Antd问题跟踪程序上看到了这一点。为完整起见，代码如下所示：

// https://stackoverflow.com/q/64729356/274677
// https://github.com/ant-design/ant-design/issues/27629

import React from 'react';
import { Form, Input, Button } from "antd";

class App extends React.Component {

    constructor(props) {
        super(props);
        // COMMENT #1: one row is enough to showcase the problem
        /* COMMENT #2: I include the `{name: 'foo', value: 'bar'}` and the "c: 'gamma'" values
         *             to demostrate that fields that aren't rendered in the DOM are NOT reported 
         *             in the `allValues` parameter of `onValuesChange` ***if and only if*** they are
         *             not inside a Form.List. Why do we see this discrepancy? Is it a BUG or 
         *             an intended feature? (and if the latter, why is it useful?)
         */
        this.state = {useA: true,
                      fields: [{name: 'foo', value: 'bar'}, {name: 'list', value: [{a: '', b: '', c: 'gamma'}]}]};
    }

    onValuesChange = (changedValues, allValues) => {
        console.log(allValues);

        const newFields = [{name: 'list',
                            value: allValues.list}];

        this.setState(newFields);
    }

    render() {
        const self = this;

        return (
          <Form
            fields = {this.state.fields}
            onValuesChange = {this.onValuesChange}
                >
                <Form.List name='list'>
                {
                    (fields, { add, remove }) => {
                        return (
                            <>
                            {fields.map((field, field_index) => {
                                return (
                                        <>
                                        <Button
                                          onClick={() => {self.setState({useA: !this.state.useA})}}
                                        >Use {self.state.useA?'B':'A'}</Button>
                                        {
                                            self.state.useA?(
                                               <Form.Item
                                                   name={[String(field_index), 'a']}
                                               >
                                                   <Input addonBefore={'a'}/>
                                             </Form.Item>):(
                                             <Form.Item
                                                     name={[String(field_index), 'b']}
                                             >
                                                   <Input addonBefore={'b'}/>
                                            </Form.Item>
                                             )
                                        }
                                    </>
                                );
                            })

                            }
                            </>
                        );
                    }
                }
            </Form.List>
          </Form>
        );

    }
}


    

//https://stackoverflow.com/q/64729356/274677
// https://github.com/ant-design/ant-design/issues/27629
从“React”导入React；
从“antd”导入{Form，Input，Button}；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
//评论#1：一行就足以说明问题
/*注释2：我包括`{name:'foo'，value:'bar'}`和“c:'gamma'”值
*演示不会报告DOM中未呈现的字段
*在`onValuesChange`***的`allValues`参数中，当且仅当***为
*不在表单列表中。为什么我们会看到这种差异？是错误还是错误
*预期功能？（如果是后者，为什么有用？）
*/
this.state={useA:true，
字段：[{name:'foo'，value:'bar'}，{name:'list'，value:[{a:''，b:''，c:'gamma'}]}；
}
onValuesChange=（更改值、所有值）=>{
console.log（所有值）；
const newFields=[{name:'list'，
value:allValues.list}]；
this.setState（newFields）；
}
render（）{
const self=这个；
返回(
{
（字段，{add，remove}）=>{
返回(
{fields.map（（字段，字段索引）=>{
返回(
{self.setState（{useA:！this.state.useA}}}
>使用{self.state.useA'B'：'A'}
{
self.state.useA(
):(
)
}
);
})
}
);
}
}
);
}
}