记录antd表单状态不更新的一次问题

511 阅读1分钟
首先,这一组表单是动态点击加号增加,设置它的initialValue取值是从一组树形结构获取,每次selectd onchange的时候resetFields后面的每一个selected的value
然后如果有三行表单,改变中间一个的状态,然后把中间这一行删掉。理论上只有2行,且第一行是状态正常的,但是第二行也就是之前删除的那一行的状态却还是显示,即使selected没有option的选项,依然像defaultValue一样显示。我认为他是antd 的bug,为了解决这个bug,我将渲染列表的State先变成空数组,在对它重新复最新的值,这个时候状态就对上了
deleteRule = (index) => {
    let { resetFields } = this.props.form;
    let ruleList = this.state.ruleList;
    ruleList = ruleList.filter((item, i) => i !== index);
    // 先滞空在添加
    this.setState({ ruleList: [] }, () => {
        this.setState({ruleList});
    });
    this.params = this.params.filter((item, i) => i !== index);
}