时间戳

首页 > 解决方案 > 如何在迭代中显示 JSX 中的数据？

reactjs - 如何在迭代中显示 JSX 中的数据？

问题描述

问题是当我 console.log 时变量具有值，但它没有在页面中呈现。循环只打印第一个数据，其他数据不打印。

const langData = [
  {
    name: "Front-End",
    children: [
      {
        name: "HTML"
      },
      {
        name: "CSS"
      },
      {
        name: "JS"
      }
    ]
  }
];
const renderName = ({ name, children }) => {
  console.log(name);
  return (
    <>
      <p>{name}</p>
      {children && children.forEach(newData => renderName(newData))}
    </>
  );
};

const App = () => {
  return <div className="App">{renderName(langData[0])}</div>;
};

例如：前端将在页面上。页面中未显示的其他数据，例如 HTML、CSS、JS。但是这些变量在console.log 中。不确定我是否想返回任何值。

Codesandbox 链接：https ://codesandbox.io/s/reverent-ardinghelli-6snby?fontsize=14

标签： reactjs

解决方案

使用 map 你可以遍历数组。map 有效而 forEach 无效的原因是 map 返回一个新数组，而 forEach 不返回任何内容（返回未定义）。您还需要添加键以消除警告。我在这里使用数组的索引作为键：

const renderName = ({ name, children }, key) => {
  console.log(name);
  return (
    <>
      <div key={key}>
      <p>{name}</p>
      {children && children.map((newData,index) => renderName(newData, index))}
      </div>
    </>
  );
};

推荐阅读