React.js无法展示GitHub用户最后5个仓库问题求助

你代码里的问题主要出在数组截取的写法和逻辑判断的运算符上，直接导致要么全显示仓库要么完全空，下面是具体问题和修复方案：

问题点分析 #

1. 数组截取错误：你写的items[items.length-5][items.length]是错误的数组访问方式，把一维数组当二维数组用，会直接得到undefined，setState后repos为空，自然显示不出内容。
2. 逻辑运算符错误：条件里的&是位运算符号，应该用逻辑与&&，否则会出现不符合预期的判断结果。
3. 缺少render方法：你的组件只定义了Data方法，但React类组件需要render方法来渲染内容，原代码没写这一步，会导致组件无法正常渲染。

修复后的完整代码 #

import React, { Component } from "react";
import withRouter from "../withRouter";

class Repose extends Component {
    constructor(props) {
        super(props);
        this.state = { repos: [] };
    }

    async componentDidMount() {
        const FetchRepose = async (user) => {
            const API_Call = await fetch(`https://api.github.com/users/${user}/repos`);
            const data = await API_Call.json();
            return { data };
        };

        FetchRepose(this.props.user).then((res) => {
            // 修正逻辑运算符，同时判断数据存在且无错误信息
            if (res.data.length > 0 && !res.data.message) {
                // 用slice(-5)直接获取最后5个仓库，简洁可靠
                const lastFiveRepos = res.data.slice(-5);
                this.setState({ repos: lastFiveRepos });
            }
        });
    }

    Data() {
        return (
            <div>
                <div>
                    <h3>最近5个仓库</h3>
                    <div className="lastfiveRepo">
                        {this.props.user}
                        {this.state.repos.map((res) => (
                            <div key={res.id}>
                                <a href={res.html_url} target="_blank" rel="noopener noreferrer">
                                    {res.name}
                                </a>
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        );
    }

    // 新增render方法，调用Data方法渲染内容
    render() {
        return this.Data();
    }
}

export default withRouter(Repose);

关键修改说明 #

• 数组截取：slice(-5)是JavaScript数组的原生方法，直接返回数组的最后5个元素，比手动计算索引更简洁不易出错。
• 逻辑判断：把&改成&&，确保逻辑判断的正确性。
• 新增render方法：React类组件必须通过render方法返回要渲染的内容，补上这一步才能让组件正常显示。
• 链接优化：给a标签加上target="_blank"和rel="noopener noreferrer"，符合现代前端安全规范。

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