Reactjs 如何在迭代中用JSX显示数据？

问题是该变量在I 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链接：

对于渲染数组，您应该使用map，因为.forEach始终返回未定义的：

---

使用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>
    </>
  );
};

---

试试这个你会直接得到你的结果

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";
const langData = [
  {
    name: "Front-End",
    children: [
      {
        name: "HTML"
      },
      {
        name: "CSS"
      },
      {
        name: "JS"
      }
    ]
  }
];
const renderName = (name,data) => (
  //console.log(name);
  <>
    <p>{name}</p>
    {data && data.map(child => (
      <p>{child.name}</p>
    ))}
  </>
);

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

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";
const langData = [
  {
    name: "Front-End",
    children: [
      {
        name: "HTML"
      },
      {
        name: "CSS"
      },
      {
        name: "JS"
      }
    ]
  }
];
const renderName = (name,data) => (
  //console.log(name);
  <>
    <p>{name}</p>
    {data && data.map(child => (
      <p>{child.name}</p>
    ))}
  </>
);

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

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);