Javascript 从fetch-in-React获取值

我试图将一个对象数组作为道具从localhost:5000/用户传递到表组件，但我做不到

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

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

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;

从“React”导入React；
导入“/App.css”；
从“./Table”导入表；
函数App（）{
设obj=[]；
取（'http://localhost:5000/users')
。然后（（响应）=>{
返回response.json（）；
})
。然后（（数据）=>{
返回obj=数据；
})
.然后（（）=>{
console.log（obj）；//这里它从localhost返回正确的数据：5000/个用户
返回obj；
});
console.log（obj）；//但是在这里，它返回一个空数组
返回(
{/*问题是如何将数据从localhost:5000/用户传递到表组件？*/}
)
}
导出默认应用程序；

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

现在，在获取数据时，请设置state状态中的数据：）

现在，如果您在fetch之外创建一个函数，它可以如下所示

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

现在，您可以对所有组件上的数据执行任何操作：） 如果要对许多数据使用同一组件，则状态需要是数组，并且需要映射状态：）

---

玩得开心

您需要使用

状态

和

使用效果

。 我建议在

useState

和

useffect

上投入更多时间。要做到这一点，React.js官方文档是一个很好的学习来源。这里还有一些资源链接：

从“React”导入React，{useState}； 导入“/App.css”； 从“./Table”导入表； 函数App（）{ 常量[obj，setObj]=useState（[]） useffect（（）=>{ 取回（“http://localhost:5000/users") 。然后（（响应）=>{ 返回response.json（）； }) 。然后（（数据）=>{ //返回obj=数据； setObj（数据）；//使用setObj设置obj }) .然后（（）=>{ console.log（obj）；//这里它从localhost返回正确的数据：5000/个用户 返回obj； }); }, []); console.log（obj）；//但是在这里，它返回一个空数组 返回( {/*问题是如何将数据从localhost:5000/用户传递到表组件？*/} ) } 导出默认应用程序；

---

我认为这是因为fetch API调用是一个承诺，因此，第二个console.log

console.log（obj）；/但就在这里，它返回一个空数组

，在承诺解决之前运行

---

您可以使用Rahul Amin提到的state和useEffect。我已经创建了一个js小提琴你可以结帐。在这里

你好，鲁胡尔，谢谢你的建议。我按照您的步骤使用useState和useEffect，但实际情况是它总是返回一个空数组。fetch函数的内部和外部。你能告诉我该怎么做吗？你应该使用

data.results

获取数据。我建议您检查API。您可以使用Postman来确保API正常工作。非常感谢你。数组没有出现，因为我的API没有返回正确的值。现在我可以得到我想要的了。我感谢你的帮助。 import React, {useState} from 'react'; import './App.css'; import Table from './Table'; function App() { const [obj, setObj] = useState([]) useEffect(() => { fetch("http://localhost:5000/users") .then((response) => { return response.json(); }) .then((data) => { //return obj = data; setObj(data); // setting obj using setObj }) .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 ( {/* The question is how can I pass data from localhost:5000/users to Table component ? */} ) } export default App;