使用 UseState Hook 后反应组件不重新渲染 [重复]答案

【问题标题】：React component not re-rendering after using UseState Hook [duplicate]使用 UseState Hook 后反应组件不重新渲染 [重复]
【发布时间】：2020-06-11 23:14:32
【问题描述】：

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

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

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

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

我认为这是因为 React 不会在值未更改时重新渲染组件，但由于顺序更改后无法找到重新渲染元素的方法。

【问题讨论】：

标签： javascript reactjs sorting react-hooks use-state

【解决方案1】：

您需要将一个新实例传递给 setScholls 以使组件重新渲染，试试这个：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：