javascript - 得到受控输入警告，但我不确定出什么问题

我正在用react编写一个表单（这是我的新手），并且在单击将传递所选项目ID的菜单项后，该表单将打开。第一次加载很好，但是当我单击其中一个输入并键入内容时，我得到：

组件将文本类型的受控输入更改为不受控制。输入元素不应从受控状态切换到非受控状态（反之亦然）。确定在组件的使用寿命期间使用受控或不受控制的输入元素。

我不确定如何解决此问题，因为我读过的地方告诉我，如果我使用undefined初始化组件，组件将给我该消息，在这种情况下，我认为我不是。

class EditMenu extends React.Component {
  constructor(props) {
    super(props);
    console.log('props constructor:', props);
    this.state = {
      item: {}
    };
    this.itemTitleName = 'name';
    this.itemTitleDescription = 'description';
    this.itemTitletag = 'tag';
  }

  componentWillMount() {
    console.log('will mount');
    let itemId = this.props.selectedItem;
    let item = this.getitemItem(itemId);
    this.setState({ item: item });
  }

  getitemItem(itemId) {
    const itemsInfo = [
      {
        id: 44,
        title: 'title1',
        description: 'desc1',
        tag:''
      },
      {
        id: 11,
        title: 'title2',
        description: 'desc2',
        tag:''
      },
      {
        id: 222,
        title: 'tiotle3',
        description: 'desc3',
        tag:''
      },
    ];

    let item = _.find(itemsInfo, { id: itemId });
    return item;
  }

  componentWillReceiveProps(nextProps) {
    console.log('received props!')
    const nextId = nextProps.selectedItem;
    if (nextId !== this.state.item.id) {
      this.setState({ item: this.getitemItem(nextId) });
    }
  }

  handleInputChange = (event) => {
    console.log('input change ');
    const target = event.target;
     const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;
    console.log(name);
    this.setState({
      item: {
        [name]: value
      }
    });
  }

  render() {
    return (
      <div className="form-container">
        <form onSubmit={this.handleSubmit} >

          <TextField
            id="item-name"
            name={this.itemTitleName}
            label="item Name"
            margin="normal"
            onChange={this.handleInputChange}
            value={this.state.item.title}
          />
          <br />
          <TextField
            id="item-desc"
            name={this.itemTitleDescription}
            label="item Description"
            margin="normal"
            onChange={this.handleInputChange}
            value={this.state.item.description}
          />
          <br />
          <TextField
            className="tag-field-container"
            name={this.itemTitletag}
            label="tag"
            type="number"
            hinttext="item tag" />

          <br /><br />
          Photos:
          <br /><br />

          <Button variant="raised" onClick={this.handleSaveButtonClick} className="button-margin">
            Save
          </Button>

        </form>
      </div>
    );
  }
}

最佳答案

我读过的地方告诉我，我的组件会给我
  如果我用undefined初始化它，我不认为这是一条消息
  在这种情况下。


其实你是:)））

您的状态在开始时是一个空对象：

this.state = {
  item: {}
};

意思是：

this.state.item.description
this.state.item.title

...是不确定的。这就是您作为value-undefined传递给控件的内容。

<TextField
   ...
   value={this.state.item.title}
/>
<br />
<TextField
   ...
   value={this.state.item.description}
/>

尝试设置初始值：

this.state = {
  item: {
    description: '',
    title: '',
  }
};

关于javascript - 得到受控输入警告，但我不确定出什么问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49822098/