时间戳

首页 > 解决方案 > TypeError：无法读取未定义的 React Hooks 的属性“地图”

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

问题描述

我需要一些帮助来理解为什么我从标题中得到错误：'TypeError：无法读取未定义的属性'map''。我需要在页面上呈现（例如此处的州和国家/地区）来自 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>
    )
}

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

标签： arraysreactjsaxiosreact-hooksreturn

解决方案

试试这个方法，

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>
  );
};
  1. 在. data_fetchData
  2. 进入user.location内部getName。

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

推荐阅读