React hook не обновляется при обновлении состояния - PullRequest
Новая
       37

React hook не обновляется при обновлении состояния

0 голосов
/ 06 июня 2019

Я пытаюсь реализовать веб-сокет в первый раз и пытаюсь создать график, который отображает загрузку моего процессора. Довольно просто Websocket работает, dataArray выглядит так, как он хочет ... Но каким-то образом хук setData () не вызывает повторную визуализацию моего компонента.

У меня 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]

Спасибо за любую помощь!

EDIT: Нашел ответ. Правильный код: 

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 Ответ

2 голосов
/ 06 июня 2019

Вы должны добавить данные в useEffect, т.е. 

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

Если мы передадим пустой массив, он будет работать как componentDidMount, а если мы передадим значение, он будет работать как componentDidUpdate при каждом изменении этого значения.

...