1

我正在开发这个应用程序，我双击页面并创建一个新项目。然后我通知 websockets 服务器将这个创建广播给所有其他收听它的用户。在另一个用户端，我必须添加这个新项目，所以每个人都会同步。

我正在使用反应钩子，这是我从头开始使用它的第一个应用程序。我在这个应用程序中遇到了几个类似的问题，但我选择了这个流程来说明基本问题。它必须涵盖大多数问题。

当我调用在useCallback“其他用户”端添加项目时，items状态为旧（空）。因此，无论我创建多少次项目，页面上都只会有一个，即我刚刚创建的那个。

这是代码示例：

import React, { useEffect, useState, useCallback } from 'react';
import io from 'socket.io-client';

let socket;

function App() {
  const [items, setItems] = useState({});

  const createItem = useCallback((data) => {
    const id = generateId();
    const newItem = { id, ...data };
    const newItems = { ...items, [id]: newItem };

    setItems(newItems)

    // When I create a new item, I notify the server to broadcast it
    socket.emit('itemCreated', newItem)
  }, [items, setItems])

  const doCreateItem = useCallback((item) => {
    // When someone else creates an item, it should be invoked be invoked
    const newItems = { ...items, [item.id]: item };
    setItems(newItems)
  }, [items]);

  useEffect(() => {
    // Connects to the server
    socket = io('ws://localhost:8090', {
      transports: ['websocket'],
      path: '/ws'
    });

    // Listens to event
    socket.on('createitem', (data) => {
      doCreateItem(data)
    });

    // I cannot add doCreateItem here, otherwise it will call this effect everytime doCreateItem is executed
  }, []);

  return (
    <div
      onDoubleClick={
        (e) => {
          createItem({});
        }
      }
    >

      {
        Object.values(items).map(item => {
          return (
            <div>{item.id}</div>
          )
        })
      }

    </div>
  );
}

export default App;

具有doCreateItem项目依赖性。另一方面，useEffect依赖列表不包含主要内容，因为每次我从服务器收到新项目时doCreateItem它都会重新调用回调。useEffect也因为我希望这个效果只执行一次（在组件安装上）。我尝试将useEffect其一分为二，一个用于连接，另一个用于侦听器，但同样的情况发生了。

我实际上有几个像这样的问题。回调执行的次数超出了我的预期，或者回调中的状态未更新。

有人可以澄清我们应该如何解决这个问题吗？

提前致谢！

编辑

正如@Ross所建议的，我更改了setItems调用以接收回调并返回新状态。这有助于setItems依赖。但我仍然无法items在doCreateItem函数中读取。它总是空的。

我注意到的一件有趣的事情是，如果我停止使用useCallback并在每个渲染上重新创建函数，它就没有该函数的更新状态，但它确实在函数之外：

function App() {
  const [items, setItems] = useState({});
 
  console.log('Rendered again and knows the state >', items)
  const doCreatePostIt = (data) => {
    console.log('Empty >', items)
    // ...
  };
  // ...
}
4

1 回答 1

1

当下一个状态依赖于当前状态时，使用函数更新形式useState消除了依赖数组中的一个依赖，解决了“陈旧状态”问题。

  • 从钩子返回的setX函数useState是稳定的，并且在渲染之间不会改变（参见useStatedoc）；从依赖数组中省略是安全的
const [items, setItems] = useState({});

const createItem = useCallback((data) => {
  const id = generateId();
  const newItem = { id, ...data };

  setItems((currItems) => ({
    ...currItems,
    [id]: newItem,
  }))

  socket.emit('itemCreated', newItem)
}, [])

useEffect(() => {
  function doCreateItem(item) {
    setItems((currItems) => ({
      ...currItems,
      [item.id]: item,
    }))
  }

  socket = io('ws://localhost:8090', {
    transports: ['websocket'],
    path: '/ws'
  });

  socket.on('createitem', doCreateItem);

  // Return a clean up function so the component will stop listening to the
  // socket when the component is unmounted.
  return () => {
    socket.off('createItem', doCreateItem)
  }
}, []);
于 2020-07-29T01:33:58.820 回答