提问一个react代码问题

Question

symbolDOM = (e, i) => {
        const { columnName, symbolsRule: { list = [], } } = this.state;
        const { getFieldDecorator } = this.props.form;
        let fromTypeItem = this.getFromTypeItem(e, i);
        return (
            <div className="content-box" key={e.key}>
                {
                    i === 0 || i === 1 ? (
                        <div className='title-item'>
                            <div>标签名</div>
                            <div>运算符</div>
                            <div>值</div>
                        </div>
                    ) : ''
                }

                <div className={`box-item-left ${i !== 0 && i !== 1 ? 'box-item-not' : ''}`}>
                    <div className="tag-name">{columnName}</div>
                    <div>
                        <Form layout="inline">
                            <Form.Item>
                                {getFieldDecorator(`symbol${e.key}-${e.group}`, {
                                    initialValue: e.selectedSymbol,
                                })(<Select onChange={this.changeInput.bind(this, e, i)} style={{ width: '100%', background: '#fff' }}>
                                    {
                                        // symbolOption
                                        list.map((rule, index) => <Option value={rule.value} key={index}>{rule.name}</Option>)
                                    }


                                </Select>
                                )
                                }
                            </Form.Item>
                            {fromTypeItem}

                        </Form>
                    </div>
                    <div className="del-icon" onClick={i !== 0 ? this.delSymbol.bind(this, i, e.group) : undefined}>
                        <div></div>
                    </div>
                </div>
                <div className="connect-symbol">
                    <Form >
                        <Form.Item>
                            {getFieldDecorator(`connect${e.key}-${e.group}`, {
                                // initialValue: e.selectedSymbol ? e.selectedSymbol : ''
                            })(
                                <Select onChange={() => this.addSymbol(e, i)}>
                                    <Option value='+' disabled>+</Option>
                                    <Option value='or'>OR</Option>
                                    <Option value='and'>AND</Option>
                                    <Option value='andnot'>ANDNOT</Option>
                                </Select>
                            )}
                        </Form.Item>
                    </Form>
                </div>
            </div>
        );
    }

调用symbolDOM 是一个循环
下面是对应事件

changeInput = (e, i) => {
        let symbolArr1 = this.state.symbolArr1;
        let symbolArr2 = this.state.symbolArr2;
        setTimeout(() => {
            this.props.form.validateFields((err, data) => {
                if (!err) {
                    let { getAttrDetailsData: { dataType = '' } } = this.props;
                    if (dataType === 'DATE') {
                        data[`val${i}-${e.group}`] = moment(data[`val${i}-${e.group}}`]).format('YYYYMMDD');
                    }
                    if (e.group === 1) {
                        symbolArr1[i].inputVal = data[`val${i}-${e.group}`];
                        symbolArr1[i].selectedSymbol = data[`symbol${i}-${e.group}`];
                    } else {
                        symbolArr2[i].inputVal = data[`val${i}-${e.group}`];
                        symbolArr2[i].selectedSymbol = data[`symbol${i}-${e.group}`];
                    }
                    this.setState({
                        symbolArr1,
                        symbolArr2
                    }, () => {
                        this.showSymbol();

                    });
                }
            });

        }, 0);
    }

/**
     * 新增运算条件
     */
    addSymbol = (e, i) => {

        let symbolArr1 = this.state.symbolArr1;
        let symbolArr2 = this.state.symbolArr2;
        setTimeout(() => {
            if (e.group === 1) {
                let symbolObj = {
                    symbol: "firSymbol",
                    selectedSymbol: '=',
                    value: 'firValue',
                    inputVal: '',
                    connectType: "firConnect",
                    connectVal: '',
                    key: e.key + 1,
                    group: e.group
                };

                this.props.form.validateFields((err, data) => {//connect${e.key}-${e.group}
                    console.log(data);
                    symbolArr1[i].connectVal = data[`connect${e.key}-${e.group}`];
                    this.setState({
                        symbolArr1
                    });
                    if (!err) {
                        if (i === symbolArr1.length - 1) {
                            symbolArr1.push(symbolObj);
                            this.setState({
                                symbolArr1
                            });
                        }
                        this.showSymbol();
                    }

                });



            } else if (e.group === 2) {
                let symbolObj = {
                    symbol: "secSymbol",
                    selectedSymbol: '=',
                    value: 'secValue',
                    inputVal: '',
                    connectType: "secConnect",
                    connectVal: '',
                    key: e.key + 1,
                    group: e.group
                };
                setTimeout(() => {
                    this.props.form.validateFields((err, data) => {
                        symbolArr2[i].connectVal = data[`connect${i}-${e.group}`];
                        this.setState({
                            symbolArr2
                        });
                        if (!err) {
                            if (i === symbolArr2.length - 1) {
                                symbolArr2.push(symbolObj);
                                this.setState({
                                    symbolArr2
                                },() => {
		                            this.showSymbol();
		                        });
                            }
                        }
                    });
                }, 0);
            }
        }, 300);

    }

我的疑问是如果不用定时器不能及时自动显示到页面上，页面为undefined
页面会用到symbolArr2[i].connectVal，如果不用定时器页面就是undefined，我想知道怎么有更好方式解决这个问题

Answer 1

阿莱克斯刘 2021-05-22 08:05:41

首先，有几个问题需要你先回答我，看到你的代码使用了大量的setTimeout，你使用setTimeout的理由是什么？在changeInput中，setTimeout设置为0的理由什么？而在addSymbol中连续使用两个setTimeout是为什么？为什么addSymbol的第一个setTimeout为0，而第二个为300毫秒呢？

• 提问者 慕粉3884565 #1

  必须设置timeout原因是如果没设置显示到页面是undefined，，所以都用了setTimeout用了300ms是因为addSymbol间隔太短设置的值将会是undefined

• 阿莱克斯刘 #2

  我觉得你可以仿照课程的第一个案例，在undefined的时候加上转菊花。直到你的settimeout结束以后，undefined取得正常数据以后，在进行页面渲染。这样页面就不会报错了。