javascript - 地图功能在 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

您的回调中没有 return 语句#Array.map，目前您的回调返回一个数组[undefined]：：

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

请参阅文档中的示例#Array.map。

let numbers = [1, 4, 9]
let roots = numbers.map(function(num) {
    return Math.sqrt(num)
})

Answer 2

您不会在后一个中返回。

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

Answer 3

这里的技巧是箭头函数隐式返回其包含的语句的值（除非它们用{}花括号括起来）。

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

() => 'returned';
() => { return 'returned'; };
function() { return 'returned'; };