React Ant Design Form: 解决新增行数据无法显示的问题

{/u0022title/u0022:/u0022React Ant Design Form: 解决新增行数据无法显示的问题/u0022,/u0022description/u0022:/u0022本文介绍如何解决在使用 React Ant Design Form 组件时，新增行数据无法显示的问题。/u0022,/u0022keywords/u0022:/u0022React, Ant Design, Form, 新增行, 数据显示, 问题解决/u0022,/u0022content/u0022:/'为了解决新增行无法显示用户输入值的问题，你需要更新 UpdateForm 组件中的 renderContent 方法。//n//n将 renderContent 方法更新为以下代码：//n//njavascript//nrenderContent = formVals => {//n const { filterSelect } = this.state;//n const {//n form: { getFieldDecorator, getFieldValue, setFieldsValue },//n filterList,//n } = this.props;//n//n getFieldDecorator('list', { initialValue: formVals?.typeList || [{}] });//n const list = getFieldValue('list');//n//n const selectProps = {//n placeholder: '请选择',//n optionFilterProp: 'children',//n style: {//n width: '100%',//n },//n allowClear: true,//n showSearch: true,//n };//n//n const handleAdd = () => {//n const newList = [...list, {}];//n setFieldsValue({//n list: newList,//n });//n };//n//n const handleDelete = index => {//n const newList = list.filter((item, key) => key !== index);//n setFieldsValue({//n list: newList,//n });//n };//n//n return (//n <Form>//n <FormItem key=/'value/' {...this.formLayout} label=/'筛选项/'>//n {getFieldDecorator('value', {//n rules: [{ required: true, message: '请选择筛选项' }],//n initialValue: formVals.value,//n })(//n <Select {...selectProps} onChange={value => this.projectChange(value)}>//n {filterList?.length &&//n filterList?.map(items => (//n <Option//n key={items.id}//n value={items.id}//n disabled={(this.props?.sourceData || []).find(item => item.key === items.id)}//n >//n {items.title}//n </Option>//n ))}//n </Select>//n )}//n </FormItem>//n//n {list.map((item, index) => (//n <Row key={index}>//n <Col span={10}>//n <FormItem label={`筛选类${index + 1}`} {...this.formLayout1}>//n {getFieldDecorator(`content[${index}].type`, {//n rules: [{ required: true, message: '请选择筛选类！' }],//n initialValue: item.type?.split(','),//n })(//n <Select {...selectProps} mode=/'multiple/'>//n {filterSelect.map(item1 => (//n <Option key={item1.label} value={item1.value}>//n {item1.label}//n </Option>//n ))}//n </Select>//n )}//n </FormItem>//n </Col>//n <Col span={10}>//n <FormItem label=/'别称/' {...this.formLayout2}>//n {getFieldDecorator(`content[${index}].name`, {//n initialValue: item.name,//n rules: [{ required: true, message: '请输入别称' }],//n })(<Input placeholder=/'请输入/' />)}//n </FormItem>//n </Col>//n <Col span={4}>//n <div style={{ width: '100%', height: '27px', marginTop: '10px', marginLeft: '10px' }}>//n {index > 0 ? (//n <span//n style={{ color: '#1890FF', cursor: 'pointer' }}//n onClick={() => handleDelete(index)}//n >//n 删除//n </span>//n ) : null}//n {index === list.length - 1 ? (//n <span//n style={{ paddingRight: '12px', color: '#1890FF', cursor: 'pointer' }}//n onClick={handleAdd}//n >//n 新增//n </span>//n ) : null}//n </div>//n </Col>//n </Row>//n ))}//n </Form>//n );//n};//n//n//n所做的更改包括：//n- 将 handleAdd 和 handleDelete 函数移动到 renderContent 方法内部。//n- 更新 handleAdd 函数，使用 setFieldsValue 方法将 list 字段值更新为包含新行的列表。//n- 更新 handleDelete 函数，使用 setFieldsValue 方法将 list 字段值更新为不包含已删除行的列表。//n- 使用 list.length - 1 条件来判断是否为最后一行显示 /'新增/' 按钮。/