小编Fel*_*res的帖子

我有几个组件需要访问相同的玩家列表。这个玩家列表不会改变，但我不知道哪个组件首先需要它。我的想法是，无论哪个组件首先需要它（axios 请求）更新我的 redux 存储，然后其他组件将仅使用相同的自定义挂钩。

export default function usePlayersList() {
  const {list, loading, error} = useSelector(state => state.accounts.players)
  const dispatch = useDispatch()
  
  useEffect(() => {
    try {
      const response = authAxios.get(endpoints.players.retrieve)
      response.then(res => {
          dispatch({
            type: "SET_PLAYERS_LIST",
            payload: {
              error: false,
              loading: false,
              list: res.data.payload
            }
          })
        })
    } catch (e) {
      console.log(e)
      dispatch({
        type: "SET_PLAYERS_LIST", 
        payload: {
          error: true,
          loading: false,
          list: []
        }
      })
    }
  }, [dispatch])
  return {list, loading, error}
}

这是我为此定制的钩子。想知道这样做是否有任何不便，或者是否有更好的模式。提前致谢。

顺便说一句...更好的是，我将加载和错误设置为 usePlayersList 中的 useState 变量（而不是将它们发送到 redux …

在此先感谢您的任何建议。我在这里在 ReactJS 中实现 websocket，我的目标是用即将到来的“onmessage”事件填充我的历史状态。对我来说奇怪的是，setHistory在收到来自“websocket.onmessage”事件的消息后清空了我的数组。它甚至消除了我的初始状态。简化版本如下：

function NotificationWebSocket ({object_id}) {
const [history, setHistory] = useState([{text: "The first notification"}]) //

    function connectToWebSocket() {
        const wsStart = (window.location.protocol === "https:" ? "wss://" : "ws://")
        const url = 'localhost:8000/live/'
        let socket = new ReconnectingWebSocket(wsStart + url + object_id)
        socket.onmessage = e => {
            console.log(e.data) // logs the received data correctly
            setHistory([...history, {text: e.data}]) // ?? this is setting my history state array to null... ??
            setHistory(history.append({text: e.data})) //also cleans my history …