Отрисовано больше хуков, чем во время предыдущего рендера при добавлении компонента хуков

Question

У меня есть компонент ловушки useInput, который работает следующим образом:

useInput(
    <input placeholder="phone number" />,
    "phone"
  )

Он получает (input, inputName) и возвращает подключенный компонент ввода. Когда я хочу динамически изменить видимость существующего ввода в моем представлении, я получаю ошибку: рендеринг больше хуков, чем во время предыдущего рендеринга.

{this.state.showMyInput && useInput(
        <input placeholder="phone number" />,
        "phone"
      )
}

Answer 1

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

Answer 2

Из реагировать на документацию вы не можете использовать крюк с условным оператором.

Вы можете все время вызывать hook и сохранять результат в переменной, а вместо этого просто обрабатывать рендер.

const input = useInput(input, inputName);
...    
{this.state.showMyInput && input}