Question

我想更新列表来自套接字，但是 setList 不起作用。是关闭东西吗？那我该怎么解决呢？

function List(props) {
  const [list, setList] = useState([]);

  useEffect(() => {
    if (props.socket) {
      props.socket.on("list", (data) => {
        setList(data);
      });
    }
  }, [props.socket]);

  const renderList = (list) => {
    if (!list) return null;
    

    list.map((room) => {
      return <Room pop={room.length} />;
    });
  };

  return <div>{renderList()}</div>;
}

Answer 1

您不应该为renderList函数使用参数。这样，您在其中引用的list引用了该参数，而不是状态值。您也不会从该函数返回任何内容，也不会将调用返回到.map。尝试这样的事情：

const renderList = () => {
  if (!list) return null;

  return list.map((room) => <Room pop={room.length} />);
};

还要确保props.socket.on(...)函数实际上正在触发并调用状态更新函数

编辑：正如其他人所述，请检查您对useEffect的依赖性。我猜想props.socket本身实际上并没有改变，所以您最终可能会得到过时的数据

Answer 2

是的，它是一个封闭的东西。尝试将列表状态包含在useEffect依赖项上。

请参阅此question的答案以供参考

useState不会在React中更新其值

2 个答案: