React函数组件列表不显示问题：是否需改用类组件？

嘿，不用换成类组件啦！你的ListSeances函数组件完全能正常工作，问题出在数组map的写法上，和组件类型没关系～

问题根源 #

你在list.map里的箭头函数用了大括号{}包裹代码，但没有显式返回<li>元素：

const listItems = list.map((item) =>{ <li>{ item }</li> });

箭头函数如果用大括号定义代码块，必须手动写return才能返回值，否则默认返回undefined，所以listItems数组里全是undefined，自然渲染不出列表。

两种修复方式 #

方式1：用小括号实现隐式返回（推荐）

去掉大括号，改用小括号包裹JSX，箭头函数会自动返回括号里的内容：

const listItems = list.map((item) => <li>{ item }</li>);
// 或者加上括号更清晰：
// const listItems = list.map((item) => (<li>{ item }</li>));

方式2：显式添加return

如果需要在map里写更多逻辑（比如条件判断），可以保留大括号，然后手动返回元素：

const listItems = list.map((item) =>{ 
  return <li>{ item }</li>; 
});

修复后的完整List.js代码 #

import React, { Component } from 'react';
import { withStyles } from 'material-ui/styles';
const styles = {
 root: {
 display: 'flex',
 backgroundColor: "whitesmoke",
 width: '100%',
 },
}
function ListSeances(props) {
 const { classes } = props;
 const list = [1,2,3,4,5,6];
 // 这里修复了map的返回问题
 const listItems = list.map((item) => <li>{ item }</li>);
 return (
 <div className={classes.root}>
 <ul>{ listItems }</ul>
 </div>
 )
}
export default withStyles (styles)(ListSeances);

额外提示 #

函数组件和类组件在渲染列表这类场景下没有本质区别，只要逻辑正确都能正常工作，你完全不需要把ListSeances改成类组件～

内容的提问来源于stack exchange，提问作者user9544554