React Antd Form 新增行数据不显示的问题解决方案

The issue might be due to the fact that when you add a new row, you are not initializing the form fields with the values from the newly added row. To fix this, you can update the 'add' method as follows:

add = () => {
  const { form } = this.props;
  const list = form.getFieldValue('list');
  const nextList = list ? [...list, {}] : [{}];
  form.setFieldsValue({
    list: nextList.map(item => ({ ...item, type: undefined, name: undefined })),
  });
}

This code ensures that when a new row is added, the 'type' and 'name' fields are set to 'undefined', so that the form fields are initialized properly for the new row.

Additionally, you need to update the 'renderContent' method to use 'list' from 'getFieldValue' instead of 'formVals':

renderContent = () => {
  const { form } = this.props;
  const { filterSelect } = this.state;
  const { formLayout, formLayout1, formLayout2 } = this.props;
  const selectProps = {
    placeholder: '请选择',
    optionFilterProp: 'children',
    style: {
      width: '100%',
    },
    allowClear: true,
    showSearch: true,
  };

  const list = form.getFieldValue('list');

  return (
    <Form>
      {/* ... */}
      {(list || []).map((item, index) => {
        return (
          <Row key={index}>
            <Col span={10}>
              <FormItem label={`筛选类${index + 1}`} {...formLayout1}>
                {getFieldDecorator(`content[${index}].type`, {
                  rules: [
                    {
                      required: true,
                      message: '请选择筛选类！',
                    },
                  ],
                  initialValue: item.type?.split(','),
                })(<Select {...selectProps} mode="multiple">
                  {filterSelect.map(item1 => (
                    <Option key={item1.label} value={item1.value}>
                      {item1.label}
                    </Option>
                  ))}
                </Select>)}              </FormItem>
            </Col>
            <Col span={10}>
              <FormItem label="别称" {...formLayout2}>
                {getFieldDecorator(`content[${index}].name`, {
                  initialValue: item.name,
                  rules: [
                    {
                      required: true,
                      message: '请输入别称',
                    },
                  ],
                })(<Input placeholder="请输入" />)}              </FormItem>
            </Col>
            <Col span={4}>
              <div style={{ width: '100%', height: '27px', marginTop: '10px', marginLeft: '10px' }}>
                {index > 0 ? (
                  <span
                    style={{ color: '#1890FF', cursor: 'pointer' }}
                    onClick={this.deleteRow.bind(this, index)}
                  >
                    删除
                  </span>
                ) : null}
                {index === 0 ? (
                  <span
                    style={{ paddingRight: '12px', color: '#1890FF', cursor: 'pointer' }}
                    onClick={this.add}
                  >
                    新增
                  </span>
                ) : null}
              </div>
            </Col>
          </Row>
        );
      })}
    </Form>
  );
};

By making these changes, the form fields for the newly added row will be properly initialized and their values will be displayed when you click "Ok".