React Hooks：如何使用钩子从哑组件映射数组

Question

我在 React 挂钩中调用 api，如下所示：

import { getAllTheBakeries } from './bakeries.api';

export const useBakeryList = () => {
  const [bakeries, setBakeries] = React.useState([]);
  
  React.useEffect(() => {
    const fetchBakeries = async () => {
      try {
        const bakeryList = await getAllTheBakeries();
        setBakeries(bakeryList.bakeries);
      } catch (error) {
        console.log(error);
      }
    };

    fetchBakeries();
  },[])

  return bakeries;
}

我想在一个哑组件中使用这个返回的数组，如下所示：

import { useBakeryList } from './bakery-list.hook';

export const BakeryList = () => {
  // I can see the returned array in my console
  console.log(useBakeryList())

  // access the returned array and map it
  return(
    {bakeries.map((bakery) => (
    <p>bakery.name</p>
  ))}
  )
}

访问挂钩返回的数组的正确语法是什么？

Answer 1

import { useBakeryList } from './bakery-list.hook';

export const BakeryList = () => {
  let bakeries = useBakeryList();
  return(
    {bakeries.map((bakery) => (
    <p>bakery.name</p>
  ))}
  )
}

你想要这样的东西吗？

React Hooks：如何使用钩子从哑组件映射数组

React Hooks: How can I use a hook to map an array from a dumb component

reactjs

react-hooks