React hook 不会在状态更新时重新渲染答案

【问题标题】：React hook doesn't rerender on state updateReact hook 不会在状态更新时重新渲染
【发布时间】：2019-06-06 13:53:15
【问题描述】：

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

【问题讨论】：

你传入的是什么数组？顺便说一句，useState 中有语法错误，x,x 之前有两个方括号，之后只有一个方括号。

标签： reactjs websocket socket.io react-hooks

【解决方案1】：

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

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

如果我们传递空数组，它将作为 componentDidMount 工作，如果我们传递值，它将在该值更改时作为 componentDidUpdate 工作。

【讨论】：

那可悲的是没有机会。但我自己找到了解决方案，我会更新我的问题。仍然感谢您的帮助！