javascript - react 形式:无法读取未定义的属性“length”

我这里的结构很简单。我有输入和文本区域。我想以状态管理输入/文本区域值。我也想验证textarea字段（最多140个字符）。我为此简单。

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


  未捕获的TypeError：无法读取App.render（App.jsx：44）（...）上未定义的属性'length'


我不知道为什么会有这个错误。我什至在我的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

最佳答案

您在eventHandler中重写状态。

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


  titleValueChangeHandler = e => this.setState（prevState =>（{... prevState，formValues：{title：e.target.value，描述：prevState.formValues.description}}）））;


对于这样的闭包重构：

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