强制组件重新渲染

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钩子中获取数据，例如todos。我还有一个网络套接字，它会在例如todo有更新时通知我。在这种情况下，我希望重新渲染组件以获得新的数据。

你是怎么做到的？

我读过一些像useSWR这样的工具，它们在超时后拉入新数据。但这不是最佳解决方案，因为我知道什么时候会有更新。

这对redux来说不是问题，因为我可以简单地通过操作获取新数据。但我不想让所有东西都处于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>
);
}