React掛鈎不會在狀態更新時重新呈現

Question

我正在嘗試第一次實現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++;
        });
    }, []);

Answer 1

您必須在useEffect中添加數據，即

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

如果傳遞空數組，則它將用作componentDidMount；如果傳遞值，則只要更改該值，它將用作componentDidUpdate。