Игнорировать React Hook «React.useEffect» может быть выполнен более одного раза - PullRequest
Новая
       35

Игнорировать React Hook «React.useEffect» может быть выполнен более одного раза

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

У меня есть компонент React, который принимает массив пар в реквизитах. Каждая пара содержит:

  • index 0: функция, которая будет вызываться при каждом изменении зависимостей,
  • index 1: массив зависимостей.

Использование компонента 

<MyComponent items={[
    [() => console.log('name has changed'), [name]],
    [() => console.log('email or phone has changed'), [email, phone]]
]} />

Реализация компонента 

const MyComponents = ({ items }) => {

    for (const [func, deps] of items) {
        React.useEffect(() => {
            func() // Everytime dependecies change call function
        }, deps)
    }

    return <div>...Content (not important)...</div>
}

Я знаю, что количество или порядок хуков не должны меняться, однако items будет одинаковым в течение всего жизненного цикла компонента. Но все равно появляется ошибка:

React Hook «React.useEffect» может быть выполнен более одного раза. Возможно, потому что он вызывается в al oop.

Есть ли способ отключить эту ошибку только в этом компоненте, без изменения tsconfig или tslint? Я пытался написать // @ts-ignore на каждой строке крючка, но это не помогло.

1 Ответ

1 голос
/ 21 апреля 2020

Это немного странно, но вы можете создать компонент для каждого элемента и использовать эффект там 

const SingleComponent = ({func, deps}) => {
  useEffect(()=> func(), [func, deps]);
  return null
 }

const MyComponents = ({ items }) => 
      <>
      <div>...Content (not important)...</div>
      { items.map(([func, deps], index) => <SingleComponent func={func} deps={deps} key={index}/> }
      </>
...