Arrays TypeError:无法读取属性'；地图'；未定义反作用钩的定义

我需要一些帮助来理解为什么我从标题中得到错误：“TypeError:无法读取未定义的属性“map”。我需要在页面上呈现（例如这里的state和country）API中的一些数据，但由于某些原因无法工作

import React, { useEffect, useState } from 'react';
import axios from 'axios';

const APIFetch = () => {
    const [user, setUser] = useState('');
    const [info, setInfo] = useState([]);

    const fetchData = async () => {
        const data = await axios.get('https://randomuser.me/api');
        return JSON.stringify(data);
    }

    useEffect(() => {
        fetchData().then((res) => {
            setUser(res)
            setInfo(res.results);
        })
    }, [])

    const getName = user => {
        const { state, country } = user;
        return `${state} ${country}`
    }

    return (
        <div>
            {info.map((info, id) => {
                return <div key={id}>{getName(info)}</div>
            })}
        </div>
    )
}

import React，{useffect，useState}来自“React”；
从“axios”导入axios；
常量APIFetch=（）=>{
const[user，setUser]=useState（“”）；
const[info，setInfo]=useState（[]）；
const fetchData=async（）=>{
const data=等待axios.get（'https://randomuser.me/api');
返回JSON.stringify（数据）；
}
useffect（（）=>{
fetchData（）。然后（（res）=>{
设置用户（res）
setInfo（res.results）；
})
}, [])
const getName=user=>{
const{state，country}=用户；
返回`${state}${country}`
}
返回(
{info.map（（info，id）=>{
返回{getName（info）}
})}
)
}

你们能帮我个忙吗？谢谢。

试试这种方法

const APIFetch = () => {
  const [user, setUser] = useState("");
  const [info, setInfo] = useState([]);

  const fetchData = async () => {
    const data = await axios.get("https://randomuser.me/api");
    return data;  <--- Heres is the first mistake
  };

  useEffect(() => {
    fetchData().then((res) => {
      setUser(res);
      setInfo(res.data.results);
    });
  }, []);

  const getName = (user) => {
    const { state, country } = user.location;  <--- Access location from the user
    return `${state} ${country}`;
  };

  return (
    <div>
      {info.map((info, id) => {
        return <div key={id}>{getName(info)}</div>;
      })}
    </div>
  );
};

const APIFetch=（）=>{
const[user，setUser]=useState（“”）；
const[info，setInfo]=useState（[]）；
const fetchData=async（）=>{
const data=wait axios.get（“https://randomuser.me/api");
返回数据{
fetchData（）。然后（（res）=>{
设置用户（res）；
setInfo（res.data.results）；
});
}, []);
const getName=（用户）=>{
const{state，country}=user.location{
返回{getName（info）}；
})}
);
};

返回

数据

，在

获取数据

中不进行字符串化

访问

user.location

内部

getName

代码库-

尝试这种方法

const APIFetch = () => {
  const [user, setUser] = useState("");
  const [info, setInfo] = useState([]);

  const fetchData = async () => {
    const data = await axios.get("https://randomuser.me/api");
    return data;  <--- Heres is the first mistake
  };

  useEffect(() => {
    fetchData().then((res) => {
      setUser(res);
      setInfo(res.data.results);
    });
  }, []);

  const getName = (user) => {
    const { state, country } = user.location;  <--- Access location from the user
    return `${state} ${country}`;
  };

  return (
    <div>
      {info.map((info, id) => {
        return <div key={id}>{getName(info)}</div>;
      })}
    </div>
  );
};

const APIFetch=（）=>{
const[user，setUser]=useState（“”）；
const[info，setInfo]=useState（[]）；
const fetchData=async（）=>{
const data=wait axios.get（“https://randomuser.me/api");
返回数据{
fetchData（）。然后（（res）=>{
设置用户（res）；
setInfo（res.data.results）；
});
}, []);
const getName=（用户）=>{
const{state，country}=user.location{
返回{getName（info）}；
})}
);
};

返回

数据

，在

获取数据

中不进行字符串化

访问

user.location

内部

getName

---

代码库-

您不需要JSON.stringify（数据）

---

您不需要

JSON.stringify（数据）

那样做

import React, { useEffect, useState } from 'react';
import axios from 'axios';

const APIFetch = () => {
    const [user, setUser] = useState('');
    const [info, setInfo] = useState([]);

    useEffect(() => {
        const fetchData = async () => {
            const res = await axios.get('https://randomuser.me/api');
            setUser(res.data);
            setInfo(res.data.results);
        }
        featchData();
    }, [])

    const getName = user => {
        const { state, country } = user;
        return `${state} ${country}`
    }

    return (
        <div>
            {info.map((info, id) => {
                return <div key={id}>{getName(info)}</div>
            })}
        </div>
    )
}

import React，{useffect，useState}来自“React”；
从“axios”导入axios；
常量APIFetch=（）=>{
const[user，setUser]=useState（“”）；
const[info，setInfo]=useState（[]）；
useffect（（）=>{
const fetchData=async（）=>{
const res=等待axios.get（'https://randomuser.me/api');
setUser（res.data）；
setInfo（res.data.results）；
}
featchData（）；
}, [])
const getName=user=>{
const{state，country}=用户；
返回`${state}${country}`
}
返回(
{info.map（（info，id）=>{
返回{getName（info）}
})}
)
}

代码沙盒：

像那样做

import React, { useEffect, useState } from 'react';
import axios from 'axios';

const APIFetch = () => {
    const [user, setUser] = useState('');
    const [info, setInfo] = useState([]);

    useEffect(() => {
        const fetchData = async () => {
            const res = await axios.get('https://randomuser.me/api');
            setUser(res.data);
            setInfo(res.data.results);
        }
        featchData();
    }, [])

    const getName = user => {
        const { state, country } = user;
        return `${state} ${country}`
    }

    return (
        <div>
            {info.map((info, id) => {
                return <div key={id}>{getName(info)}</div>
            })}
        </div>
    )
}

import React，{useffect，useState}来自“React”；
从“axios”导入axios；
常量APIFetch=（）=>{
const[user，setUser]=useState（“”）；
const[info，setInfo]=useState（[]）；
useffect（（）=>{
const fetchData=async（）=>{
const res=等待axios.get（'https://randomuser.me/api');
setUser（res.data）；
setInfo（res.data.results）；
}
featchData（）；
}, [])
const getName=user=>{
const{state，country}=用户；
返回`${state}${country}`
}
返回(
{info.map（（info，id）=>{
返回{getName（info）}
})}
)
}

---

Codesandbox:

在fetchData中console.log（res.results）的结果是什么？你确定它是数组吗？检查

res.results的值

在fetchData中console.log（res.results）的结果是什么？你确定它是数组吗？检查

res.results的值