Знаете ли вы, что React.js является наиболее предпочтительным веб-фреймворком, который используют 40,14% разработчиков в 2021 году? Хотя он широко используется разработчиками во всем мире, разработчики наблюдают определенные ошибки. Ошибка метода set useState — одна из таких проблем, связанных с управлением состоянием в React.js. Следовательно, вы можете нанять разработчиков, которые имеют опыт работы с этими ошибками. Давайте рассмотрим эту ошибку и лучшие решения для нее.

Описание изображения
Источник изображения: github.com


React Hooks — быстрое воспоминание:

Различные компоненты React имеют встроенный объект состояния, который представляет собой инкапсулированные данные для хранения активов между различными рендерингами компонентов. Это состояние является структурой данных JavaScript. Взаимодействие пользователя с этим состоянием может изменить внешний вид пользовательского интерфейса, который теперь представлен новым состоянием, отличным от предыдущего состояния.

С увеличением данных приложения инженерам React необходимо использовать различные хуки React и Redux для выделенного управления состоянием. Хуки React — это специальные функции, которые перехватывают функции и состояния React из разных функциональных компонентов. Следовательно, хуки React широко используются для использования функций React без написания класса. Давайте теперь перейдем к ловушкам useState и проблемам, связанным с методом set useState.


Что такое useState в React?

Разработчики, желающие включить переменные состояния в функциональные компоненты, используют в программе хук «useState». Начальное состояние передается функции и возвращает переменную с текущим значением состояния вместе с другой функцией для обновления этого значения. Следовательно, «useState» вызывается внутри функции для создания единого фрагмента состояния, связанного с компонентом.

Состояние может быть любого типа с хуками, даже если состояние в классе всегда является объектом. Каждая часть состояния содержит одно значение, такое как массив, логическое значение или другой тип. «useState» широко используется в состоянии локального компонента. Этот хук можно использовать с другими ключевыми решениями по управлению состоянием для больших проектов.

«useState» может быть объявлено в React как:

  • «Реагировать.useState»
  • импортировать React, {useState} из «реагировать»;

Это позволяет объявить одну переменную состояния, которая может быть любого типа в любое время. Простой пример того же:

import React, { useState } from react;
const Message = () => {
const messageState = useState(‘’);
const listState = useState([]);
}
Войти в полноэкранный режим

Выйти из полноэкранного режима

Этот метод принимает начальное значение переменной состояния. Давайте посмотрим на ошибку в методе set «useState».


Что такое метод set useState, не отражающий немедленное изменение ошибки?

Хук «useState» является одним из встроенных хуков в React и обратно совместим. В то время как разработчики React могут создавать собственные хуки, некоторые другие популярные из них — «соблазнитель», «эффект» и т. д.

Хук «useState» добавляет состояние React к другим функциональным компонентам. В следующем примере показано объявление переменной состояния в классе и инициализация состояния счетчика с 0 путем установки «this. состояние» на «{count : 0}».

class Example extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
Войти в полноэкранный режим

Выйти из полноэкранного режима

При этом невозможно прочитать «this.state», и, следовательно, хук «useState» можно использовать напрямую как:

function Example() {
const [ count, setCount ] = useState(0);
}
Войти в полноэкранный режим

Выйти из полноэкранного режима

Давайте теперь кратко рассмотрим ошибку, когда метод set «useState» не отражает изменения. Принимается во внимание следующий код:

const [posts, setPosts] = useState([]);
useEffect(() => {
const myData = await axios({
method: "post",
url: "my_api_call",
});
setPosts(myData.data);
}, []);
Войти в полноэкранный режим

Выйти из полноэкранного режима

Прежде чем переходить к различным решениям проблемы, связанной с методом «useState», важно знать причину. Когда метод set «useState» не отражает изменения немедленно, это может быть связано с текущим закрытием переменной состояния. Следовательно, он все еще ссылается на старую ценность государства. Это неспособность повторного рендеринга отразить обновленное значение состояния.

Метод set «useState» является асинхронным; следовательно, обновления не отражаются немедленно. Однако это не является причиной того, что изменение не сразу отражается в методе. Следовательно, все, что вам нужно сделать, это немедленно перейти к любому из методов, которые отражают изменения в методе set «useState».


Методы устранения ошибки, когда метод set useState не отражает немедленное изменение:

Некоторые из быстрых методов для решения ситуации, когда метод set «useState» не сразу отражает изменение, включают:

Использование хука «useEffect»:

Самое простое решение этой проблемы с помощью set-метода «useState» — использовать хук «useEffect». Это популярный хук, используемый для реализации побочных эффектов в компонентах программы. Основными побочными эффектами, выполняемыми хуком «useEffect», являются таймеры, непосредственное обновление DOM, выборка данных и т. д. Для обновления сообщений можно использовать следующий код.

useEffect(() => {
// setPosts Here
}, [posts]);
Войти в полноэкранный режим

Выйти из полноэкранного режима

Использование временной переменной: если метод «useState» не отражает немедленное изменение, можно использовать любую временную переменную. Использование временной переменной с «ожиданием» может попросить API занять некоторое время, а затем установить значение. Пример использования временной переменной:

const [posts, setPosts] = useState([]);
useEffect(() => {
const myData = await axios({
method: "post",
url: "my_api_call",
});
const newPosts = await myData.data;
setPosts(newPosts);
}, []);
Войти в полноэкранный режим

Выйти из полноэкранного режима

Слияние ответа:

Другим решением для метода set «useState», который не отражает изменения немедленно, является объединение ответов. Обратный вызов — это функция, которая передается в качестве аргумента другой функции. Следовательно, любая функция может вызывать другую функцию с помощью обратного вызова. Это достигается за счет использования синтаксиса обратного вызова обновления состояния с точным использованием синтаксиса распространения. Пример того же:

setPosts(prevPostsData=> ([...prevPostsData, ...newPostsData]));
Войти в полноэкранный режим

Выйти из полноэкранного режима


Попробуйте использовать «React.useRef()»:

Хук «useref» используется для сохранения значений между рендерами. Он используется для прямого доступа к элементу DOM или для хранения изменяемого значения, которое не вызывает повторную визуализацию при обновлении. Следовательно, хук «useRef» используется для подсчета количества раз, когда приложение отрисовывается в хуке «useState».

Простой метод использования «React.useRef()» для наблюдения за мгновенными изменениями в хуке React:

const posts = React.useRef(null);
useEffect(() => {
posts.current='values';
console.log(posts.current)
}, [])
Войти в полноэкранный режим

Выйти из полноэкранного режима


Подведение итогов:

Следовательно, эту ошибку метода set «useState» легко исправить, разобравшись со всем, что касается «useState» в React. Четыре различных решения для решения метода set useState включают использование хука «useEffect», временной переменной, слияние ответов и использование «React.useRef()». Все, что вам нужно сделать, это попробовать эти методы, чтобы найти идеальное решение этой ошибки в React.js.