使用UseState Hook后不重新渲染React组件

IT技术 javascript reactjs sorting react-hooks use-state
2021-05-12 08:20:31

我正在创建一个在屏幕上显示元素列表的 React 应用程序。我创建了一个函数,让用户可以按名称对元素进行排序。

const [schools, setSchools] = useState([{title: element1}, {title: element2}, ...]);

  const sortSchools = (key, value) => {
      setSchools(schools.sort(compareValues(key, value)));
      console.log(schools);
  }

功能正常运行,改变学校状态;我可以从控制台看到,但元素没有重新渲染。

我认为这是因为当值没有改变时 React 不会重新渲染组件,但是自从顺序改变后,无法找到重新渲染元素的方法。

2个回答

您需要将一个新实例传递给 setScholls 以便组件重新渲染,试试这个:

const sortSchools = (key, value) => {
  setSchools([...schools.sort(compareValues(key, value))]);
  console.log(schools);
}

我在这里找到了答案:UI not re-rendering on state update using React Hooks and form submit

这也和泷提供的答案一样。