map 函数在 React 组件中不起作用

Question

我目前正在学习 ReactJS，我无法发现我的代码有什么问题。所以，我里面有一个函数和 map() 方法。我用两种方式（箭头和正常）编写了它，但正常功能似乎不起作用（页面重新加载为空但没有显示错误或代码突出显示）。澄清一下，我不会同时运行这些功能 - 一个在测试另一个时被注释掉，然后我切换它。此外，箭头功能工作得很好。

能否请您检查我的代码并建议这里有什么问题？

// 有效的箭头函数

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 语句，目前您的回调 return 是一个数组：[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

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

以下是 return 值的三种方式：

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

map 函数在 React 组件中不起作用

map function doesn't work in React component

javascript

reactjs

es6-map