时间戳

首页 > 解决方案 > React - useEffect() 和 axios.get 的问题

reactjs - React - useEffect() 和 axios.get 的问题

问题描述

我很难理解为什么我的代码不起作用。我使用 useEffect() 挂钩调用 API，然后使用 setState() 更新组件状态。在我的 JSX 中，我正在映射我的信息数组以呈现数据。

这是我的代码：

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import './App.css';

function App() {
    const [info, setInfo] = useState();
    console.log(info);

    useEffect(() => {
        const getUsers = async () => {
            const res = await axios('https://api.mocki.io/v1/b043df5a');
            console.log(res.data);
            setInfo(res.data);
        };

        getUsers();
    }, []);

    return (
        <div>
            <input type='text' placeholder='Search users' />
            <input type='text' placeholder='Search users' />

            {info.map((el, index) => {
                console.log(el);
                return <h1 key={index}>{el.city}</h1>;
            })}
        </div>
    );
}

export default App;

但是，我收到此错误：'TypeError：无法读取未定义的属性'map''。我最好的猜测是，我的 JSX 是在我的状态填充 API 信息之前渲染的。

当我编写以下 JSX 时，代码确实有效，它允许我检查“信息”是否为真：

{info && info.map((el, index) => {
  console.log(el);
  return <h1 key={index}>{el.city}</h1>;
})}

这是正常行为吗？为什么在我的页面呈现之前 useEffect 没有填充我的状态？

感谢您的帮助，因为我正在努力寻找解决此特定问题的方法。

谢谢！

标签： reactjsaxiosuse-effectuse-state

解决方案

只需这样做： const [info, setInfo] = useState([]);

问题是您没有初始值，因此它自动默认为未定义。现在您试图调用.map一个未定义的值，因此它会引发错误。然而，使用一个空数组作为初始值，.map将在第一次渲染时（在 useEffect 之前）循环一个空数组，并且不会抛出任何错误。

推荐阅读