reactjs - React Signalr 访问状态变量

Question

因此，当从 signalr 收到新消息时，我尝试更新我的状态，但是当控制台记录状态变量时，它是空的。

const [posts, setPosts] = useState([]);

useEffect(() => {
  const results = await myApiCall();

  setPosts(results);
}, []);

useEffect(() => {
  websocket.connection.off(‘OnPostCreated’, (data) => {
    console.log(posts);
  });

  websocket.connection.on(‘OnPostCreated’, (data) => {
    console.log(posts);
  });

}, [posts]);

我从控制台日志中得到的响应是一个空数组。当我在我的页面上看到帖子时，我知道帖子不是空的。如果我用 setPosts(data) 替换控制台日志，它会将所有帖子替换为从 signalr 返回的帖子。关于为什么在 on 回调中帖子显示为空而不是被填充的想法？谢谢

Answer 1

这不是解决方案，而是我在遇到此问题时使用的解决方法。我仍在寻找合适的解决方案。

您可以使用单独的状态变量并在处理程序回调中更新它。在这种情况下，先前的状态并不重要，因为您只是更新变量而不是在回调中访问它。然后可以使用 useEffect 来跟踪此更改并对 posts 数组进行必要的更改，其中应包含您之前设置的数据。

const [posts, setPosts] = useState([]);
const [newPostReceived, setNewPostReceived] = useState();

useEffect(() => {
  const results = await myApiCall();
  setPosts(results);
}, []);

useEffect(() => {
  // check for undefined
  if(newPostReceived){
    let newPosts=[...posts, newPostReceived]
    setPosts(newPosts);
  }
}, [newPostReceived]);

useEffect(() => {
  websocket.connection.off(‘OnPostCreated’, (data) => {
    console.log(posts);
  });

  websocket.connection.on(‘OnPostCreated’, (data) => {
    setNewPostReceived(data);
  });

}, [posts]);