javascript - react ，形成 : Cannot read property 'length' of undefined

Question

我这里的结构非常简单。我有一个输入和文本区域。我想管理状态中的输入/文本区域值。我还想验证 textarea 字段(最多 140 个字符)。为此，我使 if 变得简单。

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

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

Answer 1

你在 eventHandler 中重写状态。

您需要使用 prevState 来保存对象的上一个状态:

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