承诺所有回应中的声明

Question

我刚刚开始学习反应。我想从Api获取数据并在浏览器中显示。在日志中，我得到了两个url，但在浏览器中，由于我使用的是使用状态，它正在更新。有人能帮忙吗？

代码：

---

import { useState } from "react";
import "./styles.css";
export default function App() {
// const [url, setUrl] = useState([]);
const [arrData, setArrData] = useState([]);
const fetchApi = () => {
let url1 = fetch("https://randomuser.me/api");
let url2 = fetch("https://randomuser.me/api");
Promise.all([url1, url2])
.then((files) => {
files.forEach((data) => {
process(data.json());
});

})
.catch((err) => {});
let process = (prom) => {
prom.then((data) => {
setArrData(data.results[0].picture.large);
console.log(data.results[0].picture.large);

});
};
};
return (
<div className="App">
<button onClick={fetchApi}>Fetch</button>
<div>
<img src={arrData} alt="random"></img>

</div>
</div>
);
}

---

Answer 1

我将编写在Promise.all()中使用的方法。url1和url2的方法可以写成：

const [dataOne, setDataOne] = useState([]);
const [dataTwo, setDataTwo] = useState([]);
const getDataOne = async () => {
const response = await axios.get('...');
setDataOne(response.data);
}
const getDataTwo = async () => {
const response = await axios.get('...');
setDataTwo(response.data);
}

然后，最好在useEffect钩子中，您可以调用Promise.all()，例如：

useEffect(() => {
Promise.all([getDataOne(), getDataTwo()]).then(values => {
console.log(values);
}).catch(error => {
console.log(error);
});
}, []);