javascript - React js 中的动态变量

Question

我在 React js 中有一个动态表单，它给我一个如下所示的输出 -

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

Object keys : Array[2] 0 : 1 1 : 2 length : 2 proto : Array[0] names-1 : "bill" names-2 : "wil" noItems-1 : 50 noItems-2 : 50050 tVal-1 : 500 tVal-2 : 2520 values-1 : 500 values-2 : 500

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

{"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);

但是我想迭代这些值，有人可以帮助我迭代这些值吗？具体来说，我如何获得“names-1”和“names-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);

FIDDLE

所以基本上我在这里所做的是使用 myVars 数组来定义我感兴趣的键。从那里我循环遍历键数组以知道要创建哪个变量，即 姓名-号码。然后将该键上的值(原始对象)括号或子符号以获得实际值。