重新渲染 React useState 而不更新状态

如何解决重新渲染 React useState 而不更新状态

我需要手动重新渲染这个状态。

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 功能？有没有更好的 React hook 来连接它？

谢谢！

解决方法

您确实错过了使用它，React 严重依赖于函数式编程。你应该做这样的事情：

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

这只是一个愚蠢的例子，但你明白了要点。 react 只会在 state 改变时重新渲染，它不会监控 state 对象是否正在发生变化或任何类似 angularjs 曾经做过的事情

,

Person 可以是道具或上下文。首先在组件之外创建实例。

const person = new Person([]);

然后将 person 作为道具传递。

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

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

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