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

您将在undefined - 函数中返回map。

尝试更改为：

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

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

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

当你的函数只有一个语句时，你可以省略大括号，只将语句放在箭头的右侧，如下所示：

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

但是如果你添加大括号，但是没有写一个return语句，那么该函数将返回undefined。所以，这将返回undefined：

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

Answer 3

您必须从地图返回您的listitem组件。您将在评论代码中返回li项目。但看起来你在转换它时使用ListItem时错过了添加返回。

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

3 个答案: