antd 为什么获取表单数据后,把拿到的values处理了下数据结构,页面的表单就重置了

表单里其它数据都没事,就嵌套结构部分有问题,我感觉是提交时刷新了state,但是不知道怎么解决这个情况呐



<NestedFrom newList={newList} />

const NestedFrom = Form.create({ name: 'registers' })(
    class extends React.Component {
        state = {
            butloading: false,
            stageLists: [],//所属栏目
            catasList: [],//学段
        };
        componentDidMount() {
        }
        //所属栏目
        getstageLists = () => {
            let stageLists = [
                { id: "2", name: "学科资源", code: "xkzy", layer: "1", parentId: "8" },
                { id: "67187239871896512", name: "测试目录1(新)", code: "" }
            ]
            this.setState({
                stageLists
            })
        }
        //提交
        onSubmit = e => {
            e.preventDefault();
            let _this = this;
            _this.setState({
                butloading: true,
            })
            this.props.form.validateFieldsAndScroll((err, values) => {
                if (!err) {
                    console.log(values)
                    let arr = {};
                    arr.rootId = values.rootId;
                    arr.resFiles = values.resFiles;
                    // const arr ={...values);
                    // const arr =Object.assign({}, values);
                    //这里拿到的resFiles是['1','2','3']的结构,我处理成树形结构
                    const newresFiles = setDirectoryArr(arr);
                    console.log('提交', newresFiles)
                    _this.setState({
                        butloading: false,
                    })
                }
            }).catch(function (error) {
            });;
        };
        //选择栏目后获取学段
        onGenderChange = (id) => {
            let catasList = [
                {
                    label: "测试目录2(旧)",
                    value: "111",
                    children: [
                        {
                            label: "测试2",
                            value: "111222",
                            children: [],
                        }
                    ]
                },
                {
                    label: "测试目录2(xin)",
                    value: "222",
                    children: [
                        {
                            label: "测试2",
                            value: "222333",
                            children: [],
                        }
                    ]
                }
            ]
            this.setState({
                catasList
            })
        }
        //提示还未选择栏目
        getcatasList = () => {
            const catasListLength = this.state.catasList.length;
            if (catasListLength <= 0) {
                message.destroy()
                message.warning('请先选择所属栏目');
            } else {
                message.destroy()
            }
        }
        render() {
            const { getFieldDecorator } = this.props.form;
            const { stageLists, catasList } = this.state;
            const { newList } = this.props;
            let _this = this;
            return (
                <div>
                    <Form
                        layout="inline"
                        onSubmit={this.onSubmit}
                    >
                        <Row gutter={24}>
                            <Col span={12}>
                                <Form.Item label="所属栏目:" >
                                    {getFieldDecorator('rootId', {
                                        rules: [
                                            {
                                                required: true,
                                                message: '请选择所属栏目',
                                            },
                                        ],
                                    })(
                                        <Select
                                            placeholder="请选择所属栏目"
                                            //mode="multiple" //多选
                                            style={{ width: "260px" }}
                                            onMouseEnter={this.getstageLists}
                                            allowClear//支持清除
                                            onChange={this.onGenderChange}
                                        >
                                            {stageLists.map(function (list, index) {
                                                return (
                                                    <Option key={list.id}>{list.name}</Option>
                                                )
                                            })
                                            }
                                        </Select>
                                        )}
                                </Form.Item>
                            </Col>
                            <Col span={24}>
                                <Collapse onChange={this.callback} >
                                    {
                                        newList.map(function (arr, index) {
                                            let list = arr.response.data
                                            let type = heFileTpe(list.type);
                                            let HeartSvg = () => (
                                                <img src={type} />
                                            );
                                            let kbs = bytesToSize(list.size);
                                            let refId = list.id;
                                            return (
                                                <Panel header={
                                                    <div>
                                                        <div>
                                                            <div>{list.name}</div>
                                                            <div>大小:{kbs}</div>
                                                            {list.type == 8 ? <div>时长:{list.timelong}</div> : null}
                                                            <Button type="primary" size="small" onClick={event => {
                                                                event.stopPropagation();
                                                                _this.goPreview(list)
                                                            }}>预览</Button>
                                                            <Button type="link" size="small" onClick={event => {
                                                                event.stopPropagation();
                                                                _this.onDelete
                                                                    (list.id)
                                                            }}
                                                            >删除</Button>
                                                        </div>
                                                        <div >收起/折叠</div>
                                                    </div>}
                                                    key={list.id}
                                                >
                                                    <Col span={12}>
                                                        <Form.Item label="学段:" >
                                                            {getFieldDecorator('resFiles.' + index + '.fileId', {
                                                                rules: [
                                                                    {
                                                                        required: true,
                                                                        message: '请选择学段',
                                                                    },
                                                                ],
                                                            })(
                                                                <Cascader
                                                                    placeholder="请选择学段"
                                                                    options={catasList}
                                                                    onMouseEnter={_this.getcatasList}//提示选择栏目
                                                                />
                                                                )}
                                                        </Form.Item>
                                                    </Col>
                                                </Panel>
                                            )
                                        })
                                    }
                                </Collapse>
                            </Col>
                            <Col span={24} >
                                <Form.Item
                                >
                                    <Button
                                        type="primary" htmlType="submit"
                                        loading={this.state.butloading}
                                    >提交</Button>
                                </Form.Item>
                            </Col>
                        </Row>
                    </Form>
                </div>
            );
        }
    }
);
阅读 2.8k
1 个回答
{getFieldDecorator('resFiles.' + index + '.fileId', {
    initialValue:'', // 表单数值没有回填,设置butloading=false后,页面更新,又刷成默认值了
    rules: [
           {
             required: true,
             message: '请选择学段',
           },
           ],
    })(
       <Cascader placeholder="请选择学段"
            options={catasList}
            onMouseEnter={_this.getcatasList}//提示选择栏目
       />
                                                                )}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题