React挂钩不会在状态更新时重新呈现

时间:2019-06-06 13:53:15

标签: reactjs websocket socket.io react-hooks

我正在尝试首次实现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++;
        });
    }, []);

1 个答案:

答案 0 :(得分:2)

您必须在useEffect中添加数据,即

useEffect(() => {
    const socket = socketIOClient(endpoint);
    var counter = 1;
    socket.on("AnswerFromApi", result => {
        setNewState(result, counter);
        counter++;
    });
}, [data]);

如果我们传递空数组,则它将用作componentDidMount;如果传递值,则只要该值发生更改,它将用作componentDidUpdate。