Javascript 警告：组件正在将未定义类型的非受控输入更改为受控输入

我得到一个警告：

警告：组件正在将未定义类型的非受控输入更改为受控输入

我在输入字段中得到了正确的值，但它不允许我编辑它。我正在动态地创建这些由按钮点击触发的字段

<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'});

var outerState=这个；
this.state.data.forEach（函数（元素）{
var stateTitle=“title”+element.id；
var stateLocation=“location”+element.id；
var statescription=“description”+element.id；
var stateStartDate=“startdate”+element.id；
var stateEndDate=“enddate”+element.id；
outerState.setState（{[statetTitle]：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'}）；

如果这是整个组件，您似乎缺少一个

handleChange

功能。它应该看起来像这样：

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

之后，每个输入都应使用

id

调用此函数，例如：

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

this.handleChange（e，dat.id）}…/>

---

（我设想

代码在某种映射函数中，但如果您只有一个输入，则可以用更简单的方式进行设置）。

您可以在数据到达时立即设置状态，而不是重复调用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]|124;'''}

---

onChange是什么样子的？

请发布完整的组件？可能是因为您的

输入
标签没有任何
类型
（例如
文本
，
密码
等）。vpulp，只是尝试了一下，运气不好。handleChange函数是什么？尝试那个解决方案。。。当我尝试更改/编辑字段（在浏览器中）中的值时，我得到以下结果：TypeError:无法读取未定义的handleChangeTitle src/App.js:251}的属性“setState”；handleChangeTitle（e）{this.setState（{['title'+0]：e.target.value}）；}在构造函数中添加：
this.handleChange=this.handleChange.bind（this）
。