Question

我试图创建一个对象数组，然后从每个对象创建一系列React组件。使用挂钩将数组设置为状态。

Error in ClosePol(x) : polygons require at least 4 points

]）

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

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

然后在我调用的父组件的return语句中 const TimeBlocks = busy.map((busy) => <Box key={busy.id} as={busy.timeState}>{busy.timeState}</Box> );

当我尝试运行时，出现错误return ( <TimeBlocks /> )

我知道我需要在此处传递一个函数，但是从以下有关以这种方式进行迭代的文档中，它们都是这种格式的。如何将其转换为可用的功能或以其他可行的方式执行此操作？预先感谢。

Answer 1

当您应分配一个返回数组的函数时，您正在为TimeBlocks分配一个数组。

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

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

编辑：您询问有关向该功能添加逻辑的问题。我提供的代码使用了两个隐式返回（一个返回.map的结果，另一个返回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组件？

1 个答案: