反应性js中的动态变量

Question

我有一个动态的形式，它给了我如下的输出-

screes are here of console logs - http://imgur.com/a/w9KYN

对象键: Array2 0:1:1:2长度:2 proto：数组名称-1："bill“名称-2："wil”noItems-1 : 50 noItems 2: 50050 tVal-1 : 500 tVal-2 : 2520值-1: 500值-2: 500

Console.log(JSON.Stringfy(值))-

{"keys":[1,2],"names-1":"will","values-1":200,"noItems-1":2002,"tVal-1":200,"names-2":"bill","values-2":200,"noItems-2":2002,"tVal-2":200}

如果我从中间删除一个或两个表单项-这是输出-

{"keys":[1,4],"names-1":"will","values-1":200,"noItems-1":2002,"tVal-1":200,"names-4":"dill","values-4":300,"noItems-4":300,"tVal-4":300}

我可以以这样的方式读取键数组-

console.log('Recived values:', values.keys);

但是我想迭代这些值，有人能帮我迭代这些值吗？具体来说，我怎么得到‘名字-1’和‘名字-2’？因为字符串是基于键数组的？

代码片段在这里：

hadleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
        if(!err){
            var lis = values.keys;
            this.setState({
                controlKey: lis
            });
            lis.forEach(function(value){
                /* need help to iterate here*/
            })
            console.log('Recived values:', values.keys);
        }
    })
}

我的渲染组件看起来像这样-

const {getFieldDecorator, getFieldValue}  = this.props.form;
    const formItemLayoutWithOutLabel = {
        wrapperCol: {
            xs: { span: 24, offset: 0 },
            sm: { span: 20, offset: 4 },
            },
    };
    getFieldDecorator('keys', {initialValue:[]});
    const keys = getFieldValue('keys');
    const formItems = keys.map((k, index) => {
        return(
            <div>
                <Row>
                    <Col span={6}>
                        <FormItem
                            label={index === 0 ? 'Item' : ''}
                            required={false}
                            key={k}
                        >
                            {getFieldDecorator(`names-${k}`, {
                                validateTrigger: ['onChange'],
                                rules: [{
                                    required: true,
                                    whitespace: true,
                                    message: 'Please input item name',
                                }],
                            })(
                                <Input placeholder="Item Name" style={{width: '75%'}}/>
                            )}
                        </FormItem>
                    </Col>
                    <Col span={6}>
                        <FormItem
                            label={index === 0 ? 'Value/Unit' : ''}
                            required={false}
                            key={k}
                        >
                            {getFieldDecorator(`values-${k}`, {
                                validateTrigger: ['onChange'],
                                rules: [{
                                    required: true,
                                    message: 'Please input item value',
                                }],
                            })(
                                <InputNumber placeholder="Item value per unit" style={{width: '75%'}}/>
                            )}
                        </FormItem>
                    </Col>
                    <Col span = {6}>
                        <FormItem
                            label={index === 0 ? 'Total Unit' : ''}
                            required={false}
                            key={k}
                        >
                            {getFieldDecorator(`noItems-${k}`, {
                                validateTrigger: ['onChange'],
                                rules: [{
                                    required: true,
                                    message: 'Please input total number of items',
                                }],
                            })(
                                <InputNumber placeholder="Please input total number of items" style={{width: '75%'}}/>
                            )}
                        </FormItem>
                    </Col>
                    <Col span={6}>
                        <FormItem
                            label={index === 0 ? 'Total Value' : ''}
                            required={false}
                            key={k}
                        >
                            {getFieldDecorator(`tVal-${k}`, {
                                validateTrigger: ['onChange'],
                                rules: [{
                                    required: true,
                                    message: 'Total Value',
                                }],
                            })(
                                <InputNumber placeholder="Total Value" style={{width: '75%'}}/>
                            )}
                            <Icon
                                className="dynamic-delete-button"
                                type="minus-circle-o"
                                disabled={keys.length === 1}
                                onClick={() => this.remove(k)}
                            />
                        </FormItem>
                    </Col>
                </Row>
            </div>

Answer 1

您要做的是定义要使用的变量。

const myVars = ['names', 'noItems', 'tVal', 'values']
let totalVal = 0;
lis.forEach( (value) => {
    myVars.forEach( myVar => {
        const key = `${myVar}-${value}`
        console.log(`${key}: ${values[key]}`)
        if (myVar === 'tVal') { 
            totalVal += values[key]
        }
    })
})
console.log(totalVal);

小提琴

基本上，我在这里要做的是使用myVars数组来定义我感兴趣的键。从这里开始，我将遍历键数组，以了解要创建哪个变量(又名name-number )。然后在该键上赋值(原始对象)括号或子符号以获得实际值。