如何使用ReactJS中的组件加载列表数据？

Question

我正在尝试使用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;

Answer 1

您将在map函数中返回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} />);

Answer 2

您正在使用地图内部的箭头功能表示法。 当将其与大括号（{和}）一起使用时，应在要返回的语句中添加一个return。

const add = (a, b) => {
    return a + b;
};

当您的函数只有一个语句时，您可以省略花括号并将其仅放置在箭头的右侧，如下所示：

const add = (a, b) => a + b;

但是，如果您添加括号，但未编写return语句，则该函数将返回未定义。 因此，这将返回undefined：

const add = (a, b) => {
    const sum = a + b;
};

Answer 3

您必须从地图返回您的listitem组件。 您正在注释的代码中返回li项目。 但是看起来您在将其转换为使用ListItem时错过了添加返回值。