为什么react组件在改变状态后不重新渲染

Question

index.js

const [todo, setToDo] = useState([]);
useEffect(async() => {
socket.on("receive_message", (message) => {
  let result = todos ? todos : [];
  if (message.sendBy === 'user') {
    let old_index;
    if (result.length > 0) {
      old_index = result.findIndex(item => item.id === message.senderId);
      if (0 >= result.length) {
        var k = 0 - result.length + 1;
        while (k--) {
          result.push(undefined);
        }
      }
      result.splice(0, 0, result.splice(old_index, 1)[0]);
      setTodos(result); // for testing
  }]
});  }, [todos]);

const render =
todos &&
todos.map((item) => {
  return (
    <li
      key={item.id}
      className={activeId.id === item.id ? "person active-user" : "person"}
      data-chat="person1"
      onClick={(e) => historyAccess(item)}
    >
      <div className="user">
        <img
          src={item.profile_pic ? item.profile_pic : "avatars/12.png"}
          alt="Profile Picture"
        />
      </div>
      <p className="name-time">
        <span className="name">{item.name ? item.name : ""}</span>
        {/* <span className="time">{}</span> */}
      </p>
    </li>
  );
});

useEffect 工作正常，settodos 正在将其值更改为对象数组，但不会重新渲染。它工作得非常好，setTodos 正在改变它的价值并按预期​​工作 那么为什么会发生这种情况

Answer 1

问题

Array.prototype.splice 就地改变数组。您将 todos 状态的引用保存到局部变量 result，然后对其进行变异并将其保存回状态。数组引用永远不会改变。

此外，useEffect 钩子回调不能为 async。

解决方案

1. 先对数组进行浅拷贝，然后对其进行变异。这样 React 就可以协调状态实际上已经更新了。
2. 由于您没有await任何内容，因此删除 async 声明是安全的

代码：

const [todos, setToDo] = useState([]); // <-- todos is already initially defined

useEffect(() => {
  socket.on("receive_message", (message) => {
    const result = [...todos]; // <-- shallow copy todos

    if (message.sendBy === 'user') {
      ...
      result.splice(0, 0, result.splice(old_index, 1)[0]); // <-- then mutate
      setTodos(result);
    }
  });
}, [todos]);