当我的状态改变时，我的 useEffect 钩子有没有办法立即重新渲染？

Question

我有一个 todos 状态，它是一个空数组。我将一个对象添加到 todos 状态，并将所有添加的 todos 的属性已完成设置为 false。

const [todos, setTodos] = useState([]);

const [todoForm, setTodoForm] = useState({
    id: null,
    task: '',
    completed: false,
    time: '',
  });

这是我用来更新待办事项的 useEffect 钩子

 useEffect(() => {
    const sortedArray = todos.sort((a, b) => b.completed - a.completed);
    setTodos(sortedArray);
  }, [todos, todos.completed]);

const toggleComplete = (id) => {
    setTodos(
      todos.map((todo) => {
        if (todo.id === id) {
          return {
            ...todo,
            completed: !todo.completed,
          };
        }
        return todo;
      })
    );
  };

问题是，当我第一次单击待办事项并完成时，它并没有一直到顶部。这是一张图片：

直到我像这样单击另一个它才会重新呈现

Answer 1

问题

排序是一种就地排序，这意味着它会改变状态对象。

Array.prototype.sort

sort() 方法对数组元素进行就地排序并返回 排序后的数组。

解决方案

在处理程序中切换“已完成”状态时对数组进行排序。先复制todos数组，这样就有了新的状态数组引用，然后排序。

const toggleComplete = (id) => {
  setTodos((todos) =>
    todos
      .map((todo) => {
        if (todo.id === id) {
          return {
            ...todo,
            completed: !todo.completed
          };
        }
        return todo;
      })
      .sort((a, b) => b.completed - a.completed)
  );
};