Как условно визуализировать компонент React, который использует хуки

Question

Следующий (хотя и надуманный) компонент нарушает реакции-хуки / правила-хуки (через eslint)

function Apple(props){
  const {seeds} = props;
  if(!seeds){
    return null;
  }
  const [bitesTaken, setBitesTaken] = useState(0);
  return <div>{bitesTaken}</div>
}

со следующей ошибкой React Hook "useState" is called conditionally. React Hooks must be called in the exact same order in every component render. Did you accidentally call a React Hook after an early return?

Я понимаю, что хуки нужно вызывать в том же порядке , но этот вид условного рендеринга (если до возврата не вызывается перехватчики, не препятствует вызову перехватчиков в одном и том же порядке. Я думаю, что Правило eslint слишком строгое, но, возможно, есть лучший способ.

Каков наилучший способ условного рендеринга компонента, использующего перехватчики?

Answer 1

Условно нельзя использовать крючки, поэтому переместите крюк выше условия.

function Apple(props){
  const {seeds} = props;
  const [bitesTaken, setBitesTaken] = useState(0);
  if(!seeds){
    return null;
  }
  return <div>{bitesTaken}</div>
}

Вы также можете упростить рендеринг следующим образом:

function Apple(props) {
  const { seeds } = props
  const [bitesTaken, setBitesTaken] = useState(0)
  return !!seeds && <div>{bitesTaken}</div>
}

Если seeds Если значение равно Falsey, то будет возвращено false (что будет отображаться как ничто), в противном случае будет возвращено div.

Я добавил двойной восклицательный знак к seeds, чтобы превратить его в логическое значение, потому что если seeds равно undefined, то при рендеринге ничего не возвращается и React выдает ошибку.

Answer 2

Другой вариант - разделить компонент.

import React,{useState} from 'react';

const Apple = (props) => {
    const {seeds} = props;
    return !!seeds && <AppleWithSeeds />;
};

const AppleWithSeeds =(props) => {
    const [bitesTaken] = useState(0);
    return <div>{bitesTaken}</div>
};

export default Apple;

Преимущество этого метода в том, что ваши компоненты остаются маленькими и логичными.

И в вашем случае вы можете иметь что-то большее, чем ' 0 'в инициализаторе useState, который вы не хотите ненужного вверху перед условием.