React中点击按钮向State添加空表单项的实现疑问

1. 初始化组件State默认值 #

先给组件设置初始State，避免activeFields或fields为undefined导致渲染报错：

class DetailsPage extends Component<IDetailsPageConfig, IDetailsPageBindings, IDetailsPageState> {
  constructor(props: IDetailsPageConfig & { bindings: IDetailsPageBindings }) {
    super(props);
    this.state = {
      fields: [],
      activeFields: {
        key: 0,
        fields: []
      }
    };
  }

  // 其他方法...
}

2. 完善addField函数逻辑 #

在addField中，根据配置生成一组空字段对象，添加到state.fields并设为当前激活表单：

addField() {
  // 基于配置生成对应空字段数组，匹配需求的input_field_name、field_name、datatype、label字段
  const newEmptyFields: IFieldDefinition[] = this.config.fields.map(configField => ({
    key: configField.key,
    value: ""
  }));

  this.setState(prevState => {
    const newFields = [...prevState.fields, newEmptyFields];
    const newActiveKey = newFields.length - 1;

    return {
      fields: newFields,
      activeFields: {
        key: newActiveKey,
        fields: newEmptyFields
      }
    };
  });
}

3. 优化初始数据加载逻辑 #

确保加载完初始数据后默认激活第一组字段：

componentDidMount() {
  this.bindings.getFields().then(data => {
    const initialState = { fields: data };
    if (data.length > 0) {
      initialState.activeFields = {
        key: 0,
        fields: data[0]
      };
    }
    this.setState(initialState);
  });
}

4. 修复渲染时的空状态处理 #

避免activeFields.fields为空时出现渲染错误：

render() {
  if (!this.state.fields) {
    return null;
  }

  const activeFields = this.state.activeFields?.fields || [];

  return (
    <div>
      <Row>
        <Col xs={2} >
          <button onClick={() => this.addField()}>
            Add a new item
          </button>
        </Col>
        <Col xs={7} >
          <div>
            {activeFields.map(field => {
              const config = this.config.fields.find(fieldConfig => fieldConfig.key === field.key);
              if (!config) {
                logger.error(`Field config for key ${field.key} not found`);
                return null;
              }

              const inputConfig = createTextInputConfig(
                config.dataType.type,
                config.displayName || "",
                false,
                config.key,
                false,
                "",
                field.value
              );

              const inputBindings = createTextInputBindings();

              return (
                <div key={`${this.state.activeFields.key}-${field.key}`}>
                  <TextInput config={inputConfig} bindings={inputBindings} />
                </div>
              );
            })}
          </div>
        </Col>
      </Row>
    </div>
  );
}

核心逻辑说明 #

• 新字段组严格匹配config.fields的结构，保证和现有表单字段一致
• 使用setState的函数式更新，避免依赖旧State的过期值
• 处理了初始加载、空数据等边界场景，防止渲染报错

内容的提问来源于stack exchange，提问作者edche