如何使用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時錯過了添加返回值。