React Hooks: как дождаться получения данных перед рендерингом - PullRequest
Новая
       21

React Hooks: как дождаться получения данных перед рендерингом

0 голосов
/ 06 августа 2020

У меня используется метод fetchEffect hook: 


export const CardDetails = () => {
  const [ card, getCardDetails ] = useState();

  const { id } = useParams();

  useEffect(() => {
    fetch(`http://localhost:3001/cards/${id}`)
    .then((res) => res.json())
    .then((data) => getCardDetails(data))
  }, [id])

  return (
     <DetailsRow data={card} />
  )
}

Но тогда внутри DetailsRow компонента эти данные не определены, что означает, что я визуализирую этот компонент до того, как данные будут извлечены. Как правильно решить?

Ответы [ 3 ]

1 голос
/ 06 августа 2020

Есть 3 способа не отображать компонент, если еще нет данных.

  1. {data && <Component data={data} />}
  2. Проверить if(!data) { return null } перед визуализацией. Этот метод предотвратит рендеринг всех компонентов до тех пор, пока нет данных.
  3. Используйте некоторый компонент <Loading /> и оператор тернара внутри JSX. В этом случае вы сможете визуализировать все остальные части компонента, для которых не нужны данные -> {data ? <Component data={data} /> : <Loading>}
1 голос
/ 06 августа 2020

Просто не отображайте его, когда данные undefined: 

export const CardDetails = () => {
  const [card, setCard] = useState();

  const { id } = useParams();

  useEffect(() => {
    fetch(`http://localhost:3001/cards/${id}`)
      .then((res) => res.json())
      .then((data) => setCard(data));
  }, [id]);

  if (card === undefined) {
    return <>Still loading...</>;
  }

  return <DetailsRow data={card} />;
};
0 голосов
/ 06 августа 2020

Попробуйте следующее: 

export const CardDetails = () => { const [ card, getCardDetails ] = useState(); const { id } = useParams(); useEffect(() => { if (!data) {fetch(`http://localhost:3001/cards/${id}`) .then((res) => res.json()) .then((data) => getCardDetails(data))} }, [id,data]) return (<div>{data && <DetailsRow data={card} />} {!data&&<p>loading...</p>}</div>) }
...