Question

获取 useEffect 上的数据

2022-04-07

1240

javascript reactjs frontend fetch-api

请考虑以下代码块：

import React from 'react';
import Card from './components/Card';
import './App.css';
import Buttongrp from './components/Buttongrp';
import { useEffect, useState } from 'react';

function App() {
    useEffect(() => {
        fetch('https://reqres.in/api/users')
        .then(response => response.json())
        .then(data => { setDataArray(data); console.log(dataArray) });
    }, []);
    const [cardImgUrl, setCardImgUrl] = useState("https://i.pinimg.com/564x/a0/d5/c9/a0d5c9af2eee2970a6eea591fade8271.jpg")
    const [firstName, setFirstName] = useState("")
    const [lastName, setLastName] = useState("")
    const [email, setEmail] = useState("")
    const [dataArray, setDataArray] = useState([])
    return (
        <>
            <div className="container d-flex my-3">
                <div className="display-4 mx-auto d-inline">CV Screener</div>
            </div>
            <div className="container-fluid my-3">
                <Card cardImgUrl={cardImgUrl} firstName={firstName} lastName={lastName} email={email} />
            </div>
            <div className="container">
                {dataArray.data.map(() => return <Buttongrp />})}
            </div>
        </>
    );
}

export default App;

我希望页面在加载时使用 fetchapi 获取数据，然后呈现其余组件。现在我收到 Uncaught TypeError：无法读取未定义的属性（读取“map”）错误。我试过了，但无法修复错误。

Answer 1

您可以使用此条件，例如：

{ dataArray?.data &&
  dataArray.data.map(() => {
    return <Buttongrp />
})

}

Fred

2022-04-07

Answer 2

您将 dataArray 设置为具有一个空数组作为默认值，但在渲染函数中，您可以像对象一样访问它，例如 dataArray.data 。

如果来自 API 的数据是对象，那么您应该使用空对象初始化状态。

如果来自 API 的数据是数组，那么您应该在渲染函数中省略 .data ，以便从实际数组中调用 .map 。

添加像@Vedant Shah 已经提到的条件也有助于防止在实时环境中出现此类错误

Answer 3

在这种情况下我总是使用加载状态并显示加载器。我建议按以下方式操作

使用加载状态 const [isLoading, setLoading] = useState(true) 用 true 值初始化它，然后在响应函数内切换到 false
在实际返回语句之前添加一个加载组件，这样，如果组件未准备好，则不会执行主语句

在返回语句之前，添加以下内容

if (true === isLoading) {
    return(<div> Loading, please wait... </div>)
}
return (
    <>
        <div className="container d-flex my-3">
            <div className="display-4 mx-auto d-inline">CV Screener</div>
        </div>
        <div className="container-fluid my-3">
            <Card cardImgUrl={cardImgUrl} firstName={firstName} lastName={lastName} email={email} />
        </div>
        <div className="container">
            {(dataArray?.data || []).map(() => return <Buttongrp />})}
        </div>
    </>
);

这将保证主返回语句始终包含数据。

如果服务器返回的响应在未找到结果的情况下不包含空数组，我通常会按以下方式循环它 (dataArray?.data || []).map() 在这种情况下，如果 dataArray 不包含“Truth”值，它将回退到空数组，这样可以避免错误，您还可以扩展逻辑以确保 dataArray?.data 始终是一个数组。