Почему при запуске приложения возникает бесконечное число l oop при добавлении избыточного состояния в качестве зависимости для ловушки `useEffect`? - PullRequest
Новая
       46

Почему при запуске приложения возникает бесконечное число l oop при добавлении избыточного состояния в качестве зависимости для ловушки `useEffect`?

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

У меня довольно сложное приложение React Native, из-за которого сложно представить выставочную закуску или что-то подобное, поэтому я делаю все возможное, чтобы объяснить проблему, с которой я сталкиваюсь:

Одной из особенностей приложения является то, что я иметь массив фиктивных данных, которые пользователь может запросить, чтобы добавить их в свой список избранных. Используя компонент ввода текста Autocomplete, пользователь может добавить новый элемент избранного в свой список, щелкнув параметр в списке. Этот новый элемент избранного затем должен отображаться.

Список избранного хранится в хранилище с избыточностью и обновляется каждую минуту (по причинам стиля) с помощью ловушки useEffect.

Проблема, с которой я сталкиваюсь, заключается в том, что мне нужно добавить состояние списка избранного в зависимости хука useEffect. Однако при этом мое приложение не запускается, что, по-видимому, вызвано бесконечной l oop (даже если я не получаю никаких предупреждений или сообщений об ошибках): enter image description here

Компонент списка избранного 

const curFavorites = useSelector(state => state.userData.favorites);

//This dispatch is used to update data in a favorite item inside the `useEffect` hook
const dispatch = useDispatch();
const updateStyling = useCallback((id, attr, value) => {
    dispatch(updateFavorites(id, attr, value))
}, [dispatch]);

//The useEffect that does not fire
useEffect(() => {
    console.log('test')
    updateStyling(id, attr1, "favorite1")
}, [props.minuteCounter, curFavorites ])

При добавлении curFavorites к зависимостям приложение не запускается и вышеприведенный console.log() не запускается.

Редуктор, обрабатывающий инициализацию и вставку избранного 

import { INSERT_FAVORITES } from "../actions/userActions";
import { FAVORITES } from "../../data/favoritesData";

// Initial state when app launches
const initState = {
    favorites: FAVORITES
};

const userReducer = (state = initState, action) => {
    switch (action.type) {
        case INSERT_FAVORITES:
            return {
                ...state,
                favorites: [
                    ...state.favorites,
                    action.newFavorite
                ]
            }
        default:
            return state;
    }
};

export default userReducer;

Что мне здесь не хватает? Почему у меня бесконечное число l oop при инициализации приложения при добавлении curFavorites в качестве зависимости в хуке useEffect?

Ответы [ 2 ]

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

вы обновляете состояние внутри userReducer (), и то же состояние прошло как зависимость от useEffect ().

Перехватывать вызовы useEffect () каждый раз, когда происходит изменение в зависимостях. Вы не должны использовать состояние как зависимость, так как оно вызывает бесконечность l oop

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

Вам нужно взять функцию updateStyling внутри хука useEffect. 

    updateStyling = useCallback((id, attr, value) => {
    dispatch(updateFavorites(id, attr, value))
}, [dispatch]); ```
...