React调用Chuck Norris API获取分类数组无法渲染显示问题求助

问题原因 #

你当前的代码存在3处需要调整的地方：

• App组件获取到分类数据后，没有将categoriesList作为参数传递给GetList子组件，子组件始终读取默认的空数组进行渲染
• GetList组件中遍历数组时，<li>标签为空，没有填充分类内容
• 你需要的是有序列表，当前使用的<ul>是无序列表标签，且循环渲染的列表项缺少必填的key属性

调整步骤 #

1. 修改App.js中GetList组件的调用 #

给GetList传递categoriesList属性，修改后return部分代码如下：

// App.js其余代码保持不变
return (
  <div className="App">
    <GetList categoriesList={categoriesList} />
  </div>
);

2. 修改GetList组件的渲染逻辑 #

将无序列表改为有序列表，填充li内容并添加key属性，完整修改后代码如下：

import React from 'react';
import PropTypes from 'prop-types';

function GetList(props) {
    const {categoriesList} = props;
    return (
        <ol className="post-list">
            {categoriesList.map(category => (
                // 分类名称唯一时直接用category作为key，比index性能更优
                <li key={category}>{category}</li>
            ))}
        </ol>
    );
}

GetList.propTypes = {
    categoriesList: PropTypes.array,
};
GetList.defaultProps = {
    categoriesList:[],
}

export default GetList;

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