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

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

import React，{Component}来自'React'；
功能列表项（道具）{
控制台日志（道具）；
返回
{props.value}
；
}
类NumberList扩展了组件{
建造师（道具）{
超级（道具）；
}
render（）{
const numbers=this.props.numbers；
const listItems=numbers.map（（number）=>{
});
控制台.log（列表项）；
返回(

{
//numbers.map（n=>{
//返回
{n}
// } ) 
列表项
}

);
}
}
导出默认数字列表；

您正在

映射

-函数中返回

未定义

尝试更改为：

const listItems = numbers.map( (number) => {
  return <ListItem key={number.toString()} value={number} />
}); 

const listItems=numbers.map（（number）=>{
返回
}); 

或：

//省略回调函数体周围的{}
//您可以利用箭头函数的隐式返回功能。
const listItems=numbers.map（（number）=>(
));
//上述示例与以下示例相同：
const listItems=numbers.map（（number）=>）；

您正在

映射

-函数中返回

未定义

尝试更改为：

const listItems = numbers.map( (number) => {
  return <ListItem key={number.toString()} value={number} />
}); 

const listItems=numbers.map（（number）=>{
返回
}); 

或：

//省略回调函数体周围的{}
//您可以利用箭头函数的隐式返回功能。
const listItems=numbers.map（（number）=>(
));
//上述示例与以下示例相同：
const listItems=numbers.map（（number）=>）；

您必须从映射返回listitem组件。您正在返回注释代码中的li项。但在将其转换为使用ListItem时，似乎没有添加return。

您必须从映射中返回ListItem组件。您正在返回注释代码中的li项。但是，在将return转换为使用ListItem时，您似乎忽略了添加return。

您正在地图中使用箭头函数表示法。当您将它与大括号（{和}）一起使用时，应该在希望返回的语句中添加一个return

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

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

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

但是如果添加大括号，但不编写return语句，那么函数将返回undefined。因此，这将返回未定义的：

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

---

您正在地图中使用箭头函数表示法。当您将它与大括号（{和}）一起使用时，应该向希望返回的语句添加一个返回

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

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

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

但是如果添加大括号，但不编写return语句，那么函数将返回undefined。因此，这将返回未定义的：

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

---

map不会自动返回数组吗？谢谢你的第一部分。它是这样工作的。但它也应该以你的第二种方式起作用。第二条路有什么问题？您能帮我理解一下吗？map返回回调返回的值数组。在您的示例中，您将获得一个未定义值的数组。map不会自动返回数组吗？谢谢你的第一部分。它是这样工作的。但它也应该以你的第二种方式起作用。第二条路有什么问题？您能帮我理解一下吗？map返回回调返回的值数组。在您的示例中，您将获得一个未定义值的数组。map不应该自动返回数组吗？那我为什么要添加return？map不应该自动返回数组吗？那我为什么要加上退货呢？