Question

我收到警告：

警告：组件正在更改类型undefined为受控的不受控制的输入。

我在输入字段中获得了正确的值，但是它不允许我对其进行编辑。我正在通过单击按钮触发的状态下动态创建这些字段。

<input
  className={
    'event-title-input event-input event-main-input input' +
    dat.id
  }
  name={'title' + dat.id}
  value={this.state['title' + dat.id] || ''}
  onChange={this.handleChange}
  style={{ display: 'none' }}
/>

var outerState = this;

  this.state.data.forEach(function(element) {

    var stateTitle = "title" + element.id;
    var stateLocation = "location" + element.id;
    var stateDescription = "description" + element.id;
    var stateStartDate = "startdate" + element.id;
    var stateEndDate = "enddate" + element.id;

    outerState.setState({ [stateTitle]: element.title });
    outerState.setState({ [stateLocation]: element.location });
    outerState.setState({ [stateDescription]: element.description 
});
    outerState.setState({ [stateStartDate]: element.startdate });
    outerState.setState({ [stateEndDate]: element.enddate });
  });
  this.setState({ saveEdit: 'Save'});

Answer 1

如果这是整个组件，则您似乎缺少handleChange函数。它可能看起来应该像这样：

handleChange(e, id) {
  this.setState({
    ['title' + id]: e.target.value
  });
}

此后，每个输入都应使用id来调用此函数，例如：

<input onChange={e => this.handleChange(e, dat.id)} ... />

（我想象<input>代码在某种映射函数中，但是如果您只有一个输入，则可以用更简单的方式进行输入）。

Answer 2

代替重复调用setState，您可以在数据到达时立即设置状态：

this.setState(
  {
    saveEdit: 'Save',
    ...this.state.data.reduce(
      (result, element) => ({
        ...result,
        ...[
          'title',
          'location',
          'description',
          'startdate',
          'enddate',
        ].reduce((result, key) => {
          result[key + element.id] = element[key];
          return result;
        }, {}),
      }),
      {}
    ),
  },
  current =>
    console.log('current state is now:', current)
);

}

如果未设置状态，是否确定每个输入都默认为空字符串（value={this.state['title' + dat.id] || ''}）？

onChange是什么样的？

警告：组件正在将类型为undefined的不受控制的输入更改为受控

2 个答案: