Блог

Главная - Вопросы по программированию - Ошибка типа: это.состояние невозможно повторить в reactjs

Ошибка типа: это.состояние невозможно повторить в reactjs

#reactjs

#reactjs

Вопрос:

Я хочу сохранить данные формы нескольких полей ввода в localstorage при отправке и отобразить в другом компоненте.

  <code>
 handleSubmit = (event) => {
    event.preventDefault();
    console.log(this.state);
    if (formValid(this.state)) {
      console.error("Form is valid");
      localStorage.setItem("userSubmit", ...this.state);
    } else {
      console.error("Form is invalid");
    }
  };
 </code>

Комментарии:

1. попробуйте использовать только localStorage.setItem(«userSubmit», this.state);

2. Попробуйте это: localStorage.setItem("userSubmit", JSON.stringify(this.state));

3. Вы не можете вызвать функцию, используя оператор распространения по объекту. Это проблема, с которой вы сталкиваетесь. Если бы это был массив, это было бы прекрасно, но ожидаемое поведение не будет вашим желаемым.

Ответ №1:

Проблема в том, что вы вызываете функцию (в данном случае setItem), используя оператор распространения по простому объекту. Вы не можете этого сделать.

Вы пытаетесь это сделать:

 state = { name: 'stack', lastname: 'overflow' }

localStorage.setItem('myKey', name: 'stack', lastname: 'overflow')

Это не имеет смысла, и вы делаете это там.

Оператор распространения допустим, например, для массива:

 state = ['stack', 'overflow']

localStorage.setItem('myKey', 'stack', 'overflow')

В этом случае вызов будет действительным, но конечным результатом будет сохранение ‘stack’, а переполнение будет игнорироваться, и оно не будет сохранено в localStorage.

Вам нужно изменить свой код на:

При этом будет сохранена строка [object Object].

 localStorage.setItem("userSubmit", this.state);

это ошибка (вы этого не хотите), поэтому вам нужно будет сохранить ваш объект в виде строки

 localStorage.setItem("userSubmit", JSON.stringify(this.state));

Ответ №2:

this.state вероятно, это объект, который на самом деле не является итеративным (и поэтому вы не можете использовать для него оператор распространения).

Если вы хотите сохранить объект в localStorage , вы можете сохранить его в виде строки, используя:

 localStorage.setItem("userSubmit", JSON.stringify(this.state));

Ответ №3:

Вы уже получили несколько хороших ответов о том, как это исправить (Stringify — хорошая идея), но почему ваш подход не работает?

Взгляните на статью MDN об операторе распространения:https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Operators/Spread_syntax

Как вы можете видеть, вы можете распространять объекты только на другие объекты. Не в массивы или функции, например. Почему это так происходит? Я думаю, потому что оператор sread пытается распространить пары значений ключа на значения ключа.

Это также подводит нас к другому возможному решению:

localStorage.setItem("userSubmit", Object.values(this.state));

Таким образом, вы создаете массив значений из состояния. Конечно, это полезно только в том случае, если вам нужны только значения без соответствующих ключей, в противном случае метод stringify все равно лучше.