react 数据可以console.log出来，但是页面渲染不出来 ...

Question

react 数据可以console.log出来，但是页面渲染不出来 ...
有谁知道的可以帮我一下 非常感谢

console.log 可以正常出来数据 但是
页面渲染的时候就报错：
Uncaught TypeError: Cannot read property 'data' of undefined

有可能是： react-query 导致的

Json 文件

{
  "current_page": 1,
  "data": [
    {
      "id": 44,
      "username": "mydreamsofseaxxxms",
      "firstname": "",
    },
  ]
   "prev_page_url": null,
  "to": 3,
  "total": 3
}

请求 utils/http文件

import qs from "qs";
import axios, { AxiosRequestConfig } from "axios";

interface Config extends AxiosRequestConfig {
    data?: object;
}
export const http = async (
    endpoint: string,
    { data, ...customConfig }: Config = {}
) => {
    const config = {
        method: "GET",
        ...customConfig,
    };

    if (config.method.toUpperCase() === "GET") {
        endpoint += `${qs.stringify(data)}`;
    }
    // @ts-ignore
    return axios(`${endpoint}`, config).then(async (res) => {
        const data = await res.data;
        if (res.status >= 200) {
            return data;
        }
    });
};

采用了react-query ｜ utils/influencer文件

import { useQuery } from "react-query";
import { http } from "../utils/http";

export const useInfluencer = (param?: any) => {
    return useQuery(["influencers", param], () =>
        http("/api/influencers?", { data: param })
    );
};

页面渲染

测试过这2种都没办法获得数据
import React, { useState, useEffect, Fragment, useCallback } from "react";
import { useInfluencer } from "../../utils/influencer";

const Home = () => {
    const { isLoading, error, data: list } = useInfluencer();
    return (
            <div>
                **这个2个都是过 但是都没用**

                {(list.data || []).map(({ username }) => (
                    <div>{username}</div>
                ))}

                {list.data.map(({ username }) => (
                    <div>{username}</div>
                ))}
            </div>
    );
};

export default Home;

console.log 可以正常出来数据 但是

页面渲染的时候就报错：

Uncaught TypeError: Cannot read property 'data' of undefined

Answer 1

解决方法是：因为使用了react query 加载还没完成就直接去获得数据 所以导致是undefined

需要判断数据是否完成加载：

        {!isLoading && (
            数据就能正常访问出来
        )}

Answer 2

react query的返回值里面的data属性在接口数据没有resolve之前一直都是undefined所以要想能运行,可以改成这样

 {(list?.data || []).map(({ username }) => (
                    <div>{username}</div>
                ))}

{list?.data.map(({ username }) => (
    <div>{username}</div>
))}

随便说一句react里面的tsx的开发体验是非常好的,就算是老项目也可以无痛的把代码的一部分切换到tsx,以后碰到这种问题,在编译阶段就能发现并且解决