[英]React hook doesn't rerender on state update
我正在尝试第一次实现websocket,并尝试创建一个图表来流式处理CPU使用率。 很简单 Websocket可以正常工作,dataArray看起来像它想要的那样。但是以某种方式setData()钩子不会触发组件的重新渲染。
我在组件的return方法中有一个console.log,以某种方式它只被触发一次。 有人可以解释我为什么吗?
const [data, setData] = useState([['x', 'x']);
useEffect(() => {
const socket = socketIOClient(endpoint);
var counter = 1;
socket.on("AnswerFromApi", result => {
setNewState(result, counter);
counter++;
});
}, []);
const setNewState = (arr, counter) => {
var dataArray = data;
dataArray.push([arr, counter]);
if(dataArray.length > 5) {
dataArray.splice(1, 1);
}
console.log(dataArray);
setData(dataArray);
};
预期的输出(也console.log(dataArray)似乎是正确的):
0: (2) ["x", "x"]
1: (2) [6.23, 35]
2: (2) [14.57, 36]
3: (2) [15.42, 37]
4: (2) [8.15, 38]
感谢您的帮助!
编辑:找到了答案。 正确的代码:
useEffect(() => {
const socket = socketIOClient(endpoint);
var counter = 1;
socket.on("AnswerFromApi", result => {
setData(prevState => {
if(prevState.length > 10) {
prevState.splice(1, 1);
}
return ([...prevState, [counter, result]])
});
counter++;
});
}, []);
您必须在useEffect中添加数据,即
useEffect(() => {
const socket = socketIOClient(endpoint);
var counter = 1;
socket.on("AnswerFromApi", result => {
setNewState(result, counter);
counter++;
});
}, [data]);
如果传递空数组,则它将用作componentDidMount;如果传递值,则只要更改该值,它将用作componentDidUpdate。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.