javascript - reactjs渲染列表没效果，帮我看一下哪里有问题

问题描述

问 题

用的typescript编译，axios处理异步，获取到数据之后渲染一个导航，不过我获取到之后并没有渲染出来 ，可以帮我看下问题出在哪吗？下面有标记没有按我想法运行代码的位置 谢谢
state有数据，console没报错

/// <reference path="../../../typings/index.d.ts" />

import * as React from 'react';
import * as axios from 'axios';

const styles = {
    container: {
        margin: '1rem'
    },
    h2: {
        fontWeight: 300,
        fontSize: '1.5rem'
    },
    techs: {
        display: 'flex',
        flexDirection: 'row',
        flexWrap: 'wrap',
        justifyContent: 'space-around'
    }
};

// 數據結構
class NavList {
    constructor(
        public name: string,
        public link: string
    ) {}
}

interface NavProps { };

interface NavState {
    nav: NavList[]
};

export class Navs extends React.Component<NavProps, NavState> {
    constructor() {
        super();
        this.state = { nav: [] };
    }

    componentDidMount() {
        axios
            .get('app/nav/nav.json')
            .then((response: Axios.AxiosXHR<NavList[]>) => {
                this.setState({ nav: response.data });
            });
    }

    render() {
        return (
            <nav style={styles.techs}>
                //没有渲染出来  开始 代码里没有这段注释
                {this.state.nav.map((nav:NavList,i:number)=>{
                    <a href={nav.link}>{nav.name}</a>
                })}
                //没有渲染出来  结束 代码里没有这段注释
            </nav>
        );
    }
}

解决方案

map方法遍历返回函数调用结果组成的新的数组, 因此在map方法中需要return标签元素, 返回渲染标签元素数组.

<a href={nav.link}>{nav.name}</a>

修改为

return (<a key={i} href={nav.link}>{nav.name}</a>)

这篇关于javascript - reactjs渲染列表没效果，帮我看一下哪里有问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！