Как обновить состояние React в перехватчиках useEffect с помощью socket.io-client - PullRequest
Новая
       11

Как обновить состояние React в перехватчиках useEffect с помощью socket.io-client

0 голосов
/ 28 апреля 2020

Я новичок ie для React, использую Typescript React для своего проекта. Я пытаюсь использовать Socket.IO-client для подключения к своему серверу Socket.IO flask.

Мой сервер будет выдавать только самую свежую информацию, например, 1-й источник: элемент 1, 2-й источник: пункт 2 ...

И мой пользовательский интерфейс React будет показывать детали предыдущей и последней информации. Я поместил коды извлечения данных в хук useEffect. Тем не менее, он предполагает, что

React Hook useEffect имеет отсутствующую зависимость: 'fetchedData'. Либо> включите его, либо удалите массив зависимостей. Вы также можете сделать функционал> update 'setFetchedData (f => ...)', если вам нужно только 'fetchedData' в вызове> 'setFetchedData' response-hooks / исчерпывающее-deps

Я не думаю, что могу поместить fetchedData в массив зависимостей, поскольку fetchedData постоянно обновляется, что приведет к бесконечному l oop. Есть ли способ, которым я могу это сделать? Ваша помощь высоко ценится. 

const MyPage = () => {
    const [fetchedData, setFetchedData] =  useState<string[]>([]);
    useEffect(() => {
        socket.emit('get_list', { user : 'userId');

        socket.on('response', (list:any) => {
            fetchedData.push(list.data)
            setFetchedData([...fetchedData])
        })
    }, [])

    return(
        {
            fetchedData.map(value, index) => <div key={index}>{value}</div>
        }
    )
}

Ответы [ 3 ]

0 голосов
/ 28 апреля 2020

См. Здесь https://www.npmjs.com/package/use-socket.io-client

ИспользованиеРазъемный крючок для реакции

0 голосов
/ 28 апреля 2020

Итак, есть две проблемы, с которыми вы столкнетесь, и я попытаюсь их решить.

Отсутствующие зависимости в useEffect.

Это вызвано eslint Правило из пакета eslint-plugin-Reaction-hooks , оно включено в приложение Создать реакцию по умолчанию.

Правило, о котором идет речь, react-hooks/exhaustive-deps, и обычно оно находит свое место в моем .eslint.rc установлен на off по той причине, которую вы видите выше. В большинстве случаев достаточно безопасно добавить все зависимости, хотя обычно я нахожу, что список растет пропорционально, и я действительно хочу видеть только список зависимостей, которые useEffect действительно заботятся об изменении.

Вы справедливо заявляете, что не хотите, чтобы это было зависимостью. Либо игнорируйте правило для указанной строки c, либо, если вы чувствуете, что понимаете, как полностью работают deps, отключите правило в файле eslint r c.

В качестве альтернативы, вы можете убедиться, что ваш хук зависимости объявляются без ошибок. Это потребует от вас абстрагирования обратных вызовов к вашему socket.on вызову в их собственные useCallback хуки, которые имеют свои собственные зависимости. Я не буду давать больше информации об этом, так как вы можете попробовать, если вы наберете sh, а затем зададите другой вопрос, если у вас возникнут проблемы.

Мутация состояний

Как уже упоминали другие, вы должны быть осторожны, чтобы не изменить свое состояние. У вас не будет ошибки типа, поскольку вы не определили тип своего состояния как только для чтения. Попробуйте изменить:

<string[]>useState(...) на <readonly string[]>useState(...), и вы увидите, что вызываете изменяющие функции непосредственно в своем состоянии.

0 голосов
/ 28 апреля 2020

Вам необходимо обновить fetchedData, используя setFetchedData

socket.on('response', (list:any) => {
   setFetchedData([...fetchedData,list.data])
})
...