如何在数组中呈现提取的数据

Question

我想从url中读取json数据，将其放入一个空数组中，放入一个react组件中，然后打印出来。但是，如果将json数据放在结果数组中并将其输出为console.log，则只输出空数组。推数组错误吗？

此外，我想重复这个网址100次，并按多次计数的顺序打印出来。例如，count：15｛Json content｝。非常感谢。

let result=[]；

fetch("http://~"(。然后(res=>return res.json((｝(。然后(data=>result.push(数据((.then(((=>console.log(结果((；

Answer 1

您需要使用useEffect和/或useState钩子来触发重新应答器。

let result = [];
useEffect(()=>{
fetch("http:// ~ ")
.then(res => res.json())
.then(data => {
result.push(data);
console.log(result);
});
},[])

这不会在数据被提取后触发重新渲染

Answer 2

最后一个.then是多余的。将console.log(result)置于与result.push(data)相同的功能中，它应该可以工作。不过，您确实需要在函数中添加括号，因为它将不再是"；一个衬垫"；。

fetch("http:// ~ ")
.then(res => res.json())
.then(data => {
result.push(data);
console.log(result);
});

编辑：.then的工作方式是，一旦承诺得到解决，它就会执行。res.json()返回一个承诺。您自己的函数(data => result.push(data)(不会返回promise。因此，在自己的函数上使用.then没有任何意义。我希望这能为你澄清问题。

编辑2:

由于这是在react中，所以不应该执行let result = []和result.push(data)。相反，你应该这样做：

const [result, setResult] = React.useState();

在您自己的功能范围内，将result.push(data)更改为：

setResult([...result, data]);

Answer 3

试试这个，

import { useState, useEffect } from "react";
export default function App() {
const [state, setState] = useState([])
useEffect(() => { 
fetch("http:// ~ ")
.then(res => res.json())
.then(data => setState([...state, data]));
}, [])
return (
<div className="App">{JSON.stringify(state)}</div>
);
}