从 React 中的 fetch 中获取价值答案

【问题标题】：Get value from fetch in React从 React 中的 fetch 中获取价值
【发布时间】：2020-10-04 01:56:57
【问题描述】：

我尝试将 localhost:5000/users 中的对象数组作为道具传递给 Table 组件，但我不能。

我可以从 localhost:5000/users 获取数据，当我尝试在其中执行 console.log 时，我可以看到数据。但是当我尝试在 fetch 函数之外执行 console.log 时，它返回一个空数组。

问题是，如果数据在 fetch 函数之外不可见，我如何将数据传递给 Table 组件？

import React from 'react';
import './App.css';
import Table from './Table';

function App() {

    let obj = [];

    fetch('http://localhost:5000/users')
    .then((response) => {
        return response.json();
    })
    .then((data) => {
        return obj = data;
    })
    .then(() => {
        console.log(obj); // Here it returns correct data from localhost:5000/users
        return obj;
    });

    console.log(obj); // But right here, it returns an empty array

    return (
        <div>
            <Table data={obj} /> {/* The question is how can I pass data from localhost:5000/users to Table component ? */}
        </div>
    )
}

export default App;

【问题讨论】：

标签： javascript node.js arrays reactjs fetch

【解决方案1】：

我认为这是因为 fetch API 调用是一个承诺，因此，第二个 console.log console.log(obj); // But right here, it returns an empty array 在承诺解决之前运行。

您可以使用 Rahul Amin 提到的 state 和 useEffect。我创建了一个 js fiddle 你可以结帐。这里。 https://jsfiddle.net/titbetegya/owk7eg2a/18/

【讨论】：

【解决方案2】：

您需要使用 state 和 useEffect state in React.js 。我建议在useState 和useEffect 上投入更多时间。为此，React.js 官方文档是很好的学习资料。这里还有一些资源链接：how to use useState how to use useEffect

从“反应”导入反应，{useState}；导入'./App.css'；从'./Table'导入表；函数应用程序（）{ 常量 [obj, setObj] = useState([]) 使用效果（（）=> { fetch("http://localhost:5000/users") .then((响应) => { 返回响应.json(); }) .then((数据) => { //返回 obj = 数据；设置对象（数据）； // 使用 setObj 设置 obj }) .then(() => { 控制台.log(obj); // 这里它从 localhost:5000/users 返回正确的数据返回对象； }); }, []); 控制台.log(obj); // 但是在这里，它返回一个空数组返回（ {/* 问题是如何将数据从 localhost:5000/users 传递到 Table 组件？ */} ) } 导出默认应用程序；

【讨论】：

嗨鲁胡尔，谢谢你的建议。我按照您的步骤使用了 useState 和 useEffect 但发生的情况是它总是返回一个空数组。 fetch 函数的内部和外部。你能建议我该怎么做吗？
您应该使用data.results 获取数据。我建议检查你的 API。您可以使用 Postman 来确保您的 API 正常工作。 postman.com
非常感谢。数组没有出现，因为我的 API 没有返回正确的值。现在我可以得到我想要的了。感谢您的帮助。

【解决方案3】：

解决方案可以是：在类的构造函数中创建一个状态。

现在，当您获取时，设置状态中的数据:)

现在，如果你在 fetch 之外创建一个函数，它可以是这样的

onClick = () => {
   console.log(this.state.data)
}

现在，您可以对所有组件上的数据做任何您想做的事情 :) 如果你想对许多数据使用相同的组件，你的状态需要是一个数组，你需要映射你的状态:)

玩得开心

【讨论】：