TypeError：无法读取未定义的 React Hooks 的属性“地图”

Posted 2023-02-22

【中文标题】TypeError：无法读取未定义的 React Hooks 的属性“地图”

【英文标题】：TypeError: Cannot read property 'map' of undefined React Hooks

【发布时间】：2021-03-10 08:15:24

【问题描述】：

我需要一些帮助来理解为什么我从标题中得到错误：'TypeError: Cannot read property 'map' of undefined'。我需要在页面上呈现（例如此处的州和国家/地区）来自 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>
    )

你们能给我一些帮助吗？谢谢。

【问题讨论】：

fetchData 中的 console.log(res.results) 的结果是什么？你确定是数组吗？

检查res.results的值

【参考方案1】：

这样做

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>
    )

代码沙盒：https://codesandbox.io/s/vigorous-lake-w52vj?file=/src/App.js

【参考方案2】：

试试这个方法，

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>
  );
;

返回data，而不在fetchData 内进行字符串化。 在getName内访问user.location。

代码库 - https://codesandbox.io/s/sharp-hawking-6v858?file=/src/App.js

【参考方案3】：

你不需要JSON.stringify(data);

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