如何解构来自useFetch的对象？

Question

一份关于我问题的文件

import { useParams } from 'react-router-dom';
import { useFetch } from '../../hooks/useFetch';
import { URL } from '../../util/fetchURL';

export default function Recipe() {
  const { id } = useParams();

  const { data: recipe, isPending, error } = useFetch(`${URL}/${id}`);

  return (
    <div className='recipe'>
      {error && <p className='error'>{error}</p>}
      {isPending && <p className='loading'>loding...</p>}

      {recipe && (
        <>
          <h2 className='page-title'>{title}</h2>
          <p>Takes {cookingTime} to cook.</p>
          <ul>
            {ingredients.map((ing) => (
              <li key={ing}>{ing}</li>
            ))}
          </ul>
          <p className='method'>{method}</p>
        </>
      )}
    </div>
  );
}

所以基本上，我有一个自定义的useFetch钩子，可以返回一些数据和其他东西。

在“recipe”变量中，我有一个由“title、cookingTime、method”等组成的对象。

我的问题是，如何解构这个配方对象为：

  const {title, cookingTime, method, ingredients} = recipe

如果我把它放在useFetch钩子下面，这段代码就不起作用了，因为起初，它在进入useFetch内部的use效应钩子之前是空的，有什么想法吗？

Answer 1

我会制作另一个组件，也许称之为RecipeData，您可以将获取结果中的配方作为道具传递下来，并且仅在数据存在时才进行渲染。

const RecipeData = ({ recipe }) => {
  const {title, cookingTime, method, ingredients} = recipe;
  return (<>
    <h2 className='page-title'>{title}</h2>
    <p>Takes {cookingTime} to cook.</p>
    ...
  );
};

export default function Recipe() {
  const { id } = useParams();

  const { data: recipe, isPending, error } = useFetch(`${URL}/${id}`);
  return (
    <div className='recipe'>
      {error && <p className='error'>{error}</p>}
      {isPending && <p className='loading'>loding...</p>}

      {recipe && <RecipeData recipe={recipe} />}
    </div>
  );
}