Question

import React, { useState, useEffect } from 'react';
import axios from 'axios';
 
function App() {
  const [data, setData] = useState({ todos: [] });
 
  useEffect(async () => {
    const result = await axios(
      'https://myapi.com/todos',
    );
 
    setData(result.data);
  });
 
  return (
    <ul>
      {data.todos.map(todo => (
        <li key={todo.id}>
          {todo.title}
        </li>
      ))}
    </ul>
  );
}
 
export default App;

我有获取数据的组件（如上），例如useEffect 钩子中的待办事项。我还有一个网络套接字，它会在例如时通知我待办事项有更新。在这种情况下，我希望重新渲染组件以获取新数据。

你是怎么做到的？

我读过类似 useSWR 之类的工具，可以在超时后提取新数据。但这不是最佳解决方案，因为我知道什么时候会有更新。

这对 redux 来说不是问题，因为我可以通过 action 简单地获取新数据。但我不想让一切都处于 redux 状态，因为它实际上并不是必需的

Answer 1

你可以在下面做，如果你不想使用 Redux，你需要将 WebSocket 连接带入你的组件中

export default function App() {
        const [data, setData] = useState({ todos: [] });
        const [isStopped, setStopped] = useState(false);
        const ws = useRef(null);
       
      useEffect(async () => {
          const result = await axios(
          'https://myapi.com/todos',
          );
         setData(result.data);
       });
        useEffect(() => {
            ws.current = new WebSocket("wss://your urls/");
            ws.current.onopen = () => console.log("ws opened");
            ws.current.onclose = () => console.log("ws closed");
    
            return () => {
                ws.current.close();
            };
        }, []);
    
        useEffect(() => {
            if (!ws.current) return;
    
            ws.current.onmessage = e => {
                if (isStopped) return;
                const message = JSON.parse(e.data);
               setData(e.data);
                console.log("e", message);
            };
        }, [isStopped]);
    
        return (
            <div>
                <button onClick={() => setPause(!isStopped)}>
                    {isStopped ? "Resume" : "Stop"}
                </button>
            </div>
        );
    }

强制组件重新渲染

1 个答案: