地图功能在 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 回调中没有返回语句，当前您的回调返回一个数组：[undefined]：

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

见examples in #Array.map docs。

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'; };