反应，表格：无法读取未定义的属性“长度”答案

【问题标题】：react, forms: Cannot read property 'length' of undefined反应，表格：无法读取未定义的属性“长度”
【发布时间】：2019-03-05 20:32:24
【问题描述】：

我这里的结构非常简单。我有一个输入和文本区域。我想管理状态中的输入/文本区域值。我还想验证 textarea 字段（最多 140 个字符）。如果是这样，我会很简单。

现在，当我在第一个输入中输入内容时，出现错误：

Uncaught TypeError: Cannot read property 'length' of undefined at App.render (App.jsx:44) (...)

我不知道为什么会出现此错误。我什至还没有在我的 textarea 字段上做任何事情......

代码：

class App extends Component {
  state = {
    formValues: {
      title: "",
      description: ""
    }
  };

  titleValueChangeHandler = e => this.setState({ formValues: { title: e.target.value } });


  descriptionValueChangeHandler = e => {
    if (this.state.formValues.description.length === 140) return;
    this.setState({ formValues: { description: e.target.value } });
  };

  render() {
    return (
      <>
        <input
          type="text"
          onChange={this.titleValueChangeHandler}
          value={this.state.formValues.title}
        />
        <textarea
          onChange={this.descriptionValueChangeHandler}
          value={this.state.formValues.description}
        />
        <p>{this.state.formValues.description.length}</p>
      </>
    );
  }
}

演示：https://codesandbox.io/s/kw6pnxwv0v

【问题讨论】：

我在反应中有这个问题，我不确定根本原因，但作为一种解决方法，您可以使用(this.state.formValues.description||'') 来防止它崩溃，因为假设默认值是安全的空字符串。这就是我一直在解决这个特定问题的方式。如果您确实找到了根本原因，请在此处分享。

标签： javascript reactjs forms

【解决方案1】：

你在 eventHandler 中重写状态。

您需要使用 prevState 来保存对象的 prev 状态：

titleValueChangeHandler = e => this.setState(prevState => ({ ...prevState, formValues: { title: e.target.value, description: prevState.formValues.description }}));

对于像这样的闭包重构：

titleValueChangeHandler = e => {
const newValue = e.target.value
this.setState(prevState => ({ ...prevState, formValues: { title: newValue , description: prevState.formValues.description }}));
}

【讨论】：