Question

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

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

未捕获到的TypeError：无法读取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来保存对象的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 }}));
}

反应形式：无法读取未定义的属性“ length”

1 个答案: