Есть ли правильный способ использовать объект как зависимость в useEffect?

В настоящее время у меня есть созданный мной хук реакции, который принимает объект запроса.

export function useMyQuery(query: QueryObjectType)
{
    React.useEffect(executeQuery, [ query ]);
    // ...
}

К сожалению, каждый раз, когда мой хук вызывается как часть повторного рендеринга, несмотря на то, что query никогда не менялся и остается тем же самым объектом, что и раньше, я получаю бесконечный цикл.

Я могу решить эту проблему, заключив query в JSON.stringify(...), но я не уверен, правильно ли это? Есть ли какой-либо предпочтительный механизм для проверки равенства объектов при передаче в качестве зависимости в useEffect?


reactjs typescript react-hooks use-effect
person Alexander Trauzzi    schedule 10.02.2020    source источник
comment
Можете ли вы опубликовать компонент, использующий useMyQuery?   -  person Paul    schedule 10.02.2020
comment
Вот еще один связанный с этим вопрос, который может оказаться полезным: stackoverflow.com/questions/ 54095994 /   -  person bdanzer    schedule 10.02.2020
comment
@Paul - Полностью уловил, о чем вы там думали. И, конечно же, да, объект, который я передаю, инициализирован в этом компоненте. Конечно, каждый раз все по-разному. Думаю, проблема решена ????   -  person Alexander Trauzzi    schedule 10.02.2020

Ответы (1)


arrow_upward
1
arrow_downward

Добавление useState() должно помочь. Вам нужно будет вернуть сеттер, чтобы разрешить повторный запрос от родителя.

useState(query) срабатывает только при первом рендеринге, поэтому _query остается неизменным, пока явно не установлен.

export function useMyQuery(query: QueryObjectType)
{
    const [_query, setQuery] = useState(query);

    React.useEffect(executeQuery, [ _query ]);
    // ...

   return setQuery;
}
person Richard Matsen    schedule 10.02.2020