如何从 React 中的 axios GET 请求对象中提取数据？答案

【问题标题】：How to extract data from axios GET request object in React?如何从 React 中的 axios GET 请求对象中提取数据？
【发布时间】：2022-01-22 11:59:06
【问题描述】：

目前我一直在使用 axios 和 React 中的 useEffect Hook 从 API 中提取数据。这是通过让用户在代码字段中输入一个值来完成的，该值将用于向 API 发出请求。但是，在提取数据并将其显示在页面上时，我遇到了问题。通常，我会使用 data.map() 将数组数据映射到不同的字段，但是从这个 API 中提取时，我得到了一个项目对象，我在映射到字段以在应用程序上显示时遇到问题。此外，我还注意到 useEffect 钩子在控制台中不断被调用，我不知道如何让它只被调用一次。如果有人可以帮助解决这些问题中的任何一个，将不胜感激！

home.js

import React, { useState, useEffect } from 'react';
import axios from "axios";
import './Home.css';                        // Import styling

function Home() {

    const [data, setData] = useState([])
    const [state, setState] = useState({
        code: ""
      })

    const handleChange = e => setState(prevState => ({ ...prevState, [e.target.name]: e.target.value }))

 
    useEffect(() => {
        axios.get(baseURL)
            .then((response) => {
                setData(response.data);
                console.log(data)
            });
    });

    
    return (
        <div className="form-container">
            <h1>axios-test</h1>
            <div className="form-group">
                    <label>Code</label>
                    <input type="text" className="form-control" name="code" value={state.code} onChange={handleChange}/>
            </div>
            <div className="form-group">
                    <label>Lead</label>
                    <input type="text" className="form-control" name="Lead" value={data.map(data => data.project.primaryLeaderName)} onChange={handleChange} disabled/>
            </div>
        </div>
    )

}

export default Home;

console output

【问题讨论】：

标签： reactjs object react-hooks axios mapping

【解决方案1】：

您的useEffect 电话有两个问题。

您缺少依赖项数组。查看documentation。如果您只想在组件第一次挂载时运行，则应将 [] 作为第二个参数添加到 useEffect。
console.log(data)。您期望 data 具有新值，但 React 不保证这一点。对setData 的调用会更新data，但您将无法访问同一useEffect 调用中的新值。在这种情况下，我认为您不需要这样做。值得指出的是，这是学习的常见问题useEffect

最后，这部分有个小问题，根据截图数据：

value={data.map(data => data.project.primaryLeaderName)}

查看Array.prototype.map 上的文档。 data 没有 project 密钥。实际上，您正在映射项目！最好的命名约定是根据它所代表的内容来命名函数中的元素。 data 中的每个元素都是一个项目。所以：

value={data.map(project => project.primaryLeaderName)}

编辑：

似乎我误读了控制台输出。您的回复看起来像这样：

{project: [//...Array of projects]

所以试试这个：

value={data.project.map(proj => proj.primaryLeaderName)}

【讨论】：

我尝试将值更改为 value={data.map(project => project.primaryLeaderName)}，但我现在在控制台中收到错误消息，指出 Uncaught TypeError: data.map is not a function
@Brandini 那是因为data 是一个对象，而不是一个数组，它不能被映射。您想从此对象访问哪些属性？
我更新了我的回复。似乎我误读了带有您数据的屏幕截图。我跟着你的primaryLeaderName 键，虽然在屏幕截图中它说projectLeaderName。

【解决方案2】：

我建议在 useEffect 中添加依赖数组 [] 并使用 useEffect 挂钩来调用函数 =>

const fetchData = async ()=>{
    const {data} = await axios.get('url')

// 我们等待响应并销毁它以仅获取数据设置状态（数据） }

 useEffect(()=>{
 fetchData()
     },[])

【讨论】：