Блог

Главная - Вопросы по программированию - Повторная визуализация React useState без обновления состояния

Повторная визуализация React useState без обновления состояния

#react-native #react-hooks

#react-native #реагирующие перехваты

Вопрос:

Мне нужно повторно отобразить это состояние вручную.

 const [person] = React.useState(new Person());

У меня есть методы внутри класса Person для его обновления (например person.setName('Tom') , ).
Когда я обновляю person, используя метод из самого себя, он не запускает повторную визуализацию состояния person.

 const carouselData = React.useMemo(() => {
  // Doesn't re-render when the fields on the person class update
}, [person]);

Есть ли способ принудительно повторно отобразить это состояние без использования функции setState?
В идеале, есть ли способ вызвать эту повторную визуализацию изнутри самого класса Person?

Или это полное злоупотребление функциональностью useState? Будет ли лучший реактивный хук для подключения этого?

Спасибо!

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

1. Использование изменяемых классов в качестве объекта состояния является антипаттером, поскольку хуки разработаны вокруг неизменяемых ссылок. Если экземпляр остается неизменным между рендерами, то передача его в список зависимостей не позволит React обнаруживать изменения внутри объекта.

Ответ №1:

вы действительно скучаете по его использованию, react сильно зависит от функционального программирования. вы должны делать что-то вроде:

 const [person, setPerson] = useState(new Person());
...
setPerson(setPersonName(person, 'Tom'));

это просто глупый пример, но суть вы поняли. react будет повторно отображать только в том случае, если состояние изменено, он не будет отслеживать, изменяется ли объект состояния или что-то подобное, что раньше делал angularjs

Ответ №2:

Вместо этого Person может быть prop или in context. Сначала создайте свой экземпляр вне вашего компонента.

const person = new Person([]);

Затем передайте person как prop.

 function App({person}) {
  const [personName, setPersonName] = useState(person.personName);

  function handleNameChange(txt) {
    person.addTodo(txt);
    setPersonName(person.personName);
  }

  function handleSubmit(txt) {
    handleNameChange(txt);
  }
  
  return (...)
}