Question

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

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

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

该功能正常运行，更改了学校的状态；我可以从控制台看到这一点，但是元素没有重新呈现。

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

Answer 1

您需要将新实例传递给setScholls才能重新渲染组件，请尝试以下操作：

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

Answer 2

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

这与塔基提供的答案相同。

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

2 个答案: