如何使用ReactJS中的组件加载列表数据？
如何使用ReactJS中的组件加载列表数据？
提问于 2018-03-06 02:57:06
我正在尝试使用ReactJS中的'ListItem‘组件呈现一些数据。但是组件没有获得数据。我还尝试在不使用'ListItem‘组件的情况下加载数据。在这种情况下，它是成功渲染的。
那么，如何使用'ListItem‘组件加载数据呢？
import React, { Component } from 'react';
function ListItem(props) {
console.log(props);
return <li>{props.value}</li>;
}
class NumberList extends Component {
constructor(props) {
super(props);
}
render() {
const numbers = this.props.numbers;
const listItems = numbers.map( (number) => {
<ListItem key={number.toString()} value={number} />
});
console.log(listItems);
return(
<ul>
{
// numbers.map( n => {
// return <li>{n}</li>
// } )
listItems
}
</ul>
);
}
}
export default NumberList;回答 3
Stack Overflow用户
回答已采纳
发布于 2018-03-06 03:02:08
您将在map-function中返回undefined。
尝试更改为以下内容：
const listItems = numbers.map( (number) => {
return <ListItem key={number.toString()} value={number} />
}); 或者：
// By omitting the {} around the callback function body
// you can utilise the implicit-returning feature of arrow functions.
const listItems = numbers.map( (number) => (
<ListItem key={number.toString()} value={number} />
));
// The above example is the same as:
const listItems = numbers.map( (number) => <ListItem key={number.toString()} value={number} />);Stack Overflow用户
发布于 2018-03-06 03:35:21
您正在地图中使用箭头函数表示法。当您将其与大括号({和})一起使用时，您应该在您希望返回的语句中添加一个return。
const add = (a, b) => {
return a + b;
};当您的函数只有一条语句时，可以省略大括号，只将该语句放在箭头的右侧，如下所示：
const add = (a, b) => a + b;但是，如果您添加了大括号，但没有编写return语句，则函数将返回undefined。因此，这将返回undefined：
const add = (a, b) => {
const sum = a + b;
};Stack Overflow用户
发布于 2018-03-06 03:02:25
您必须从map返回listitem组件。您将在注释代码中返回li项。但看起来您在将其转换为使用ListItem时错过了添加return。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49117590
复制相关文章
相似问题
腾讯云开发者
