React Hooks：如何在渲染前等待数据被获取

Question

我在 useEffect 钩子中有 fetch 方法：

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组件内部这个数据没有定义，这意味着我在获取数据之前渲染了这个组件。如何正确解决？

Answer 1

只是不要在数据为时渲染它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} />;
};

Answer 2

如果还没有任何数据，有 3 种方法可以不渲染组件。

1. {data && <Component data={data} />}
2. if(!data) { return null }渲染前检查。此方法将阻止所有组件渲染，直到没有任何数据。
3. <Loading />在 JSX 中使用一些组件和三元运算符。在这种情况下，您将能够呈现不需要数据的组件的所有其他部分 ->{data ? <Component data={data} /> : <Loading>}