reactjs - 为什么 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 正在改变它的值(value)并按预期​​工作然后为什么会这样

Answer 1

问题
Array.prototype.splice就地改变数组。您保存了您的 todos 的引用状态到局部变量 result然后对其进行变异并将其保存回状态。数组引用永远不会改变。
另外，useEffect Hook 回调不能是 async .
解决方案

首先浅拷贝数组，然后对其进行变异。这样 React 就可以协调状态实际上已经更新了。

既然你不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]);