如何为数组中的每个对象渲染一个组件？

Posted 2023-02-22

【中文标题】如何为数组中的每个对象渲染一个组件？

【英文标题】：How do I render a component for each object in an array?

【发布时间】：2021-01-09 22:38:27

【问题描述】：

我有一个功能组件。我有一个对象数组。

const 天赋 = [..., ...]

我还返回以下组件：

      <Card>
    <Accordion>
      <Card >
        <Accordion.Toggle
          as=Card.Header
          eventKey="0"
        >
          some title
        </Accordion.Toggle>
        <Accordion.Collapse eventKey="0">
          <Card.Body>
            <Container>
              <div>title</div>
              <p>words</p>
              <div>title</div>
              <p>words</p>
              <div>title</div>
              <p>words</p>
              <div>title</div>
              <p>words</p>
            </Container>
          </Card.Body>
        </Accordion.Collapse>
      </Card>
    </Accordion>
    <Link to="/home">
      <Button>
        Home
      </Button>
    </Link>
  </Card>

我要做的是为数组中的每个对象返回 Accordion 组件。

到目前为止我尝试了什么。

在卡片组件中，我在数组上运行了一个 map()：

<Card>
talents.map(()=> 
return (
<Accordion>
  <Card >
    <Accordion.Toggle
      as=Card.Header
      eventKey="0"
    >
      some title
    </Accordion.Toggle>
    <Accordion.Collapse eventKey="0">
      <Card.Body>
        <Container>
          <div>title</div>
          <p>words</p>
          <div>title</div>
          <p>words</p>
          <div>title</div>
          <p>words</p>
          <div>title</div>
          <p>words</p>
        </Container>
      </Card.Body>
    </Accordion.Collapse>
  </Card>
</Accordion>
)
)

<Link to="/home">
  <Button>
    Home
  </Button>
</Link>
</Card>

什么都没有发生。

我还尝试创建一个通过数组映射并返回 jsx 的函数，然后在卡片组件中运行该函数，如下所示：

const renderTalents = () => 

talents.map(() => (
        <Accordion>
      <Card >
        <Accordion.Toggle
          as=Card.Header
          eventKey="0"
        >
          some title
        </Accordion.Toggle>
        <Accordion.Collapse eventKey="0">
          <Card.Body>
            <Container>
              <div>title</div>
              <p>words</p>
              <div>title</div>
              <p>words</p>
              <div>title</div>
              <p>words</p>
              <div>title</div>
              <p>words</p>
            </Container>
          </Card.Body>
        </Accordion.Collapse>
      </Card>
    </Accordion>
))

然后我像这样在卡片组件中运行该函数：

<Card>
renderTalents()
</Card>

再一次，什么也没发生。

还将函数包装在 中：

<Card>
renderTalents()
</Card>

什么都没有。

【问题讨论】：

talents.map(...) 如果talents 有零个元素，将返回空白。你是console.log(...) 每次迭代，来验证你确实有这个元素吗？也许试试看你的map()ing 工作正常吗？

这能回答你的问题吗？ React render array of components

你是如何定义talents的？

我做了控制台日志，天赋持有2个对象。

Console.log(objects) 指向对象引用，在执行的不同点可能不同（当对象未定义时，console.log(objects) 将显示对象，如果它们最终被填充脚本的结尾）。这就是为什么记录静态文本可以帮助您确定它实际被填充的时间和位置。

【参考方案1】：

你错过了地图之前的返回。

const renderTalents = () => 

  return talents.map(() => (
        <Accordion>
      <Card >
        <Accordion.Toggle
          as=Card.Header
          eventKey="0"
        >
          some title
        </Accordion.Toggle>
        <Accordion.Collapse eventKey="0">
          <Card.Body>
            <Container>
              <div>title</div>
              <p>words</p>
              <div>title</div>
              <p>words</p>
              <div>title</div>
              <p>words</p>
              <div>title</div>
              <p>words</p>
            </Container>
          </Card.Body>
        </Accordion.Collapse>
      </Card>
    </Accordion>
))

【讨论】：

你说得对，OP 确实错过了那里的return()，但发布的其他代码示例有一个return()，同样，它也失败了。无论如何，OP已经大量更新了他们的答案。

您错过了 map() 中的“元素”。它应该是这样的：map((element) =>

【参考方案2】：

@ben，您似乎没有使用您正在映射的 talents 数组项。数组中的每个项目都会调用您传递给 map function 的箭头函数，第一个参数是项目，下一个参数是键。

您没有使用该项目。举一个下面的一些天赋的例子......（他们可以是你想要的任何东西）

const talents = [
  title: 'React', skill: 'Expert',
  title: 'React Native', skill: 'Pro',
  title: 'Public Speaking', skill: 'Novice',
];

// So mapping over talents would result it
const renderTalents => talents.map((
  title, skill
) => (
  <Accordion key=title>
    <Card >
      <Accordion.Toggle
        as=Card.Header
        eventKey="0"
      >
        title
      </Accordion.Toggle>
      <Accordion.Collapse eventKey="0">
        <Card.Body>
          <Container>
            <div>skill</div>
          </Container>
        </Card.Body>
      </Accordion.Collapse>
    </Card>
  </Accordion>
));

【讨论】：

请给地图最外层的元素添加一个key prop。类似 ... 请参考：reactjs.org/docs/lists-and-keys.html

【参考方案3】：

如果talents 为空，那么您将始终从talents.map() 获得空白结果。

var arr1 = [];

console.log("Results: |" + arr1.map(()=>).join('') + "|");

不要忘记console.log(object) 也会在运行结束时显示对象的结果，而不是在调用它的那一刻。如果没有递归引用，您可以使用 console.log(JSON.stringify(object)) 解决此问题。