реагировать, формы: не может прочитать свойство 'длина' неопределенного

Question

У меня здесь очень простая структура.У меня есть вход и текстовые сообщения.Я хочу, чтобы управлять значениями ввода / textarea в состоянии.Также я хочу проверить поле textarea (максимум 140 символов).Я делаю просто, если для этого.

И теперь, когда я что-то набираю в первом вводе, у меня появляется ошибка:

Uncaught TypeError: Невозможно прочитать свойство 'length' undefined вApp.render (App.jsx: 44) (...)

Я понятия не имею, почему у меня возникает эта ошибка.Я даже ничего не делаю в своем текстовом поле ...

код:

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, описание: prevState.formValues.description}}));

А для закрытия рефакторинга вот так:

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