映射功能在React组件中不起作用

Question

我目前正在学习ReactJS，但我无法发现我的代码有什么问题。所以，我里面有一个函数和map（）方法。我已经用2种方式（箭头和普通）编写了代码，但是普通功能似乎不起作用（页面重新加载为空，但未显示任何错误或代码突出显示）。为了澄清起见，我不能同时运行这些功能-在测试另一个功能时，其中一个功能已被注释掉，然后我将其切换。同样，箭头功能也可以正常工作。

您能否检查我的代码并提供建议，这是什么问题？

//起作用的箭头功能

function App() {
const appComponent = AppData.map((data) => <Data question={data.question} answer={data.answer} />);
return <div>{appComponent}</div>;
}

//正常功能不起作用

function App() {
const appComponent = AppData.map(function (data) {
    <Data question={data.question} answer={data.answer} />
});
return <div>{appComponent}</div>;
}

Answer 1

#Array.map回调中没有return语句：

#Array.map

Answer 2

您不打算返回后者。

function App() {
  const appComponent = AppData.map(function (data) {
    return <Data question={data.question} answer={data.answer} />;
  });
  return <div>{appComponent}</div>;
}

Answer 3

这里的窍门是箭头函数隐式返回其所包含语句的值（除非它们用

function App() {
const appComponent = AppData.map(function (data) {
    return <Data question={data.question} answer={data.answer} />
});
return <div>{appComponent}</div>;

大括号括起来）。

以下是返回值的三种方法：

{}