如何遍历状态中的映射以创建 React 组件？

Question

我正在尝试创建一个对象数组，然后从每个对象创建一系列 React 组件。数组设置为使用 Hooks 的状态。

const [busy, setBusy] = useState([
    {id: 1, timeState: "freeTime"},
    {id: 2, timeState: "freeTime"},
    {id: 3, timeState: "freeTime"}

])

然后我创建了一个创建组件的函数。

const TimeBlocks = busy.map((busy) => 
    <Box key={busy.id} as={busy.timeState}>{busy.timeState}</Box>
);

然后在我调用的父组件的return语句中 return ( <TimeBlocks /> )

当我尝试运行时，出现错误 Element type is invalid: expected a string (for built in components) or a class/function (for composite components) but got object.

我知道我需要在这里传递一个函数，但是从下面关于以这种方式迭代的文档来看，它们都是这种格式的。我怎样才能把它变成一个可用的功能，或者以另一种可行的方式做到这一点？提前致谢。

Answer 1

您正在将一个数组分配给 TimeBlocks，而您应该分配一个 returns 数组的函数。

const TimeBlocks = () => busy.map((busy) => 
    <Box key={busy.id} as={busy.timeState}>{busy.timeState}</Box>
);

这会将 TimeBlocks 定义为功能组件，您可以像示例中那样使用它 <TimeBlocks />。

编辑：您询问了有关向函数添加逻辑的问题。我提供的代码使用两个隐式 returns（一个 returns .map 的结果，一个 returns Box 组件），但您可以轻松修改它以在任一位置添加一些逻辑，只需添加括号和 return 语句：

const TimeBlocks = () => {
  // logic here
  return busy.map((busy) => {
    // and/or logic here
      return <Box key={busy.id} as={busy.timeState}>{busy.timeState}</Box>
    }
  });
}

如何遍历状态中的映射以创建 React 组件？

How can I iterate through a map in in state to create React components?

dictionary

reactjs

react-hooks