React-无法通过数组映射-对象作为React子对象无效

Question

我的问题是我试图使用以下代码映射item.healthLabels

{item.healthLabels.map((label) => ({ label }))}

我得到的错误是Unhandled Rejection (Error): Objects are not valid as a React child (found: object with keys {label}). If you meant to render a collection of children, use an array instead.

然后我尝试以这种方式仅显示单个标签，并且效果很好

{item.healthLabels[0]}

我读到的是必须添加.toString()，但是如果我执行{item.healthLabels.map((label) => ({ label.toString() }))}，编译器甚至不会让我看到预览。它只是不接受此.toString()。有解决办法吗？

healthLabels似乎只是一个标准数组，例如0: "peanut-free", 1: "sugar-free"...

Answer 1

您实际上不需要执行if (didAboutMove && aboutAnimation) { // This block will execute in second run. aboutAnimation.reverse(); didAboutMove = !didAboutMove; return; // Returns from here in second run. } didAboutMove = !didAboutMove; // assigned truthy value on first run aboutAnimation = gsap.timeline // assigned truthy value on first run ，因为您没有使用原始值，而是将它们包装在一个对象中。尝试只做：.map应该可以解决它。

必须修改与{item.healthLabels}相同的代码，以便：

.map

Answer 2

在工作情况下，您将打印字符串，而在非工作版本中，您将尝试打印{label: 'some label value'}之类的对象。

请勿从地图中返回对象

{item.healthLabels.map((label) => ( label ))}

Answer 3

由于它是字符串类型，因此请尝试按原样返回值标签。

    const healthLabels = ["peanut-free", "sugar-free"];
    {healthLabels.map((label) => label )}