如何在 React 中显示对象数组？

如何在 React 中显示对象数组

在 React 中，显示对象数组需要一个映射过程将数组转换为可见元素。

将数组映射到渲染项目

要渲染对象数组，您可以使用 .map() 函数。此函数采用接受单个数组元素作为输入的回调函数。

选项 1：在变量中存储映射项目

<code class="javascript">render() {
    const data =[{"name":"test1"},{"name":"test2"}];
    const listItems = data.map((d) => <li key={d.name}>{d.name}</li>);

    return (
      <div>
      {listItems }
      </div>
    );
  }</code>

这里，listItems 变量存储映射的元素，然后在

中呈现。

选项 2：在 Return 中直接映射

或者，您可以消除对中间变量：

<code class="javascript">render() {
    const data =[{"name":"test1"},{"name":"test2"}];
    return (
      <div>
      {data.map(function(d, idx){
         return (<li key={idx}>{d.name}</li>)
       })}
      </div>
    );
  }</code>

在此变体中，在 return 语句中直接调用映射函数。

唯一标识符的键

当渲染数组时，必须为每个项目提供唯一的键。在这两个选项中，都会向每个渲染元素添加一个键，以优化渲染性能并允许高效更新。

以上是如何在 React 中显示对象数组？的详细内容。更多信息请关注PHP中文网其他相关文章！