React Hooks: обработка объектов как зависимость в useEffects - PullRequest
Новая
       12

React Hooks: обработка объектов как зависимость в useEffects

0 голосов
/ 17 октября 2019

ОБНОВЛЕНИЕ: Да для варианта использования 1, если я извлекаю search.value за пределами useEffect и использую его как зависимость, это работает.

Но у меня есть обновленный вариант использования ниже

Вариант использования 2 : Я хочу передать объект searchHits на сервер. Сервер, в свою очередь, возвращает его мне с обновленным значением в ответ. Если я пытаюсь использовать объект searchHits, я все равно получаю бесконечный цикл 

state: {
    visible: true,
    loading: false,
    search: {
        value: “”,
        searchHits: {....}, 
        highlight: false,
    }
}

let val = search.value
let hits = search.searchHits
useEffect( () => {

    axios.post(`/search=${state.search.value}`, {hits: hits}).then( resp => {
        …do something or ..do nothing
        state.setState( prevState => {
            return {
                …prevState,
                search: {... prevState.search, hits: resp.hit}
            }
        })
    })
}, [val, hits])

Вариант использования 1 : я хочу найти строку, а затем выделить при получении результатов

Например, 

state: {
    visible: true,
    loading: false,
    search: {
        value: “”,
        highlight: false,
    }
}

useEffect( () => {

    axios.get(`/search=${state.search.value}`).then( resp => {
        …do something or ..do nothing
        state.setState( prevState => {
            return {
                …prevState,
                search: {... prevState.search, highlight: true}
            }
        })
    })
}, [state.search])

В использовании. Эффект Я выполняю вызов API, используя search.value. eslint жалуется, что есть зависимость от state.search, он не распознает state.search.value. Даже если вы передаете state.search.value, он жалуется на state.search

Теперь, если вы передадите state.search в качестве зависимости, он пойдет в бесконечном цикле, потому что после вызова API мы обновляем флаг highlights внутри поиска.

, который вызовет другое обновление состояния и рекурсивный цикл.

Один из способов избежать этого - не размещать вложенные объекты в состоянии или перемещать флаг подсветки за пределы поиска, но я пытаюсь этого не делатьидти по этому пути, чтобы дать мне полную зависимостьЯ бы предпочел, чтобы Объект находился в состоянии, называемом поиском. Есть ли способ лучше подойти к этому. Если я хочу сохранить свой объект состояния, как указано выше, как мне обрабатывать бесконечный цикл

1 Ответ

1 голос
/ 17 октября 2019

Может быть, просто ошибка в вещах. Вы отозвали некоторый код, сказав //do something, и скрыли код. Вы уверены, что он не имеет ничего общего с поисковым объектом?

Также попробуйте извлечь переменную до useEffect().

const searchValue = state.search.value; useEffect(()=>{// axios call here},[searchValue])

Если искомым значением является объект, реагирует на поверхностное сравнение и может не дать желаемого результата. Повторный рендеринг на множестве объектных зависимостей не идеален. Извлеките переменные.

React проводит поверхностное сравнение зависимостей, указанных в useEffect

например, 

const {searchParam1, searchParam2} = search.value;
useEffect(() => {
//logic goes here
}, [searchParam1, searchParam2]);

Кроме того, вы можете добавить зависимость devдля eslint-plugin-реагировать-hooks , для выявления распространенных ошибок с помощью hooks

...