如何从只为一个对象提供一次服务的json API请求和存储多个对象

Question

我想建立一个显示电影趋势的主页。由于API只为一个电影(一个对象(提供一次，因此我的逻辑是发送许多请求并将它们存储到一个数组中。

const [trends, setTrends] = useState([]);
const [movie, setMovie] = useState({});
const trendsTitles = ["dune", "annette", "cendrillon", "mon frere", "athena", "footloose"];
async function getData(title) {
await axios
.get("http://www.omdbapi.com/?apikey=[apikey]&t=" + title)
.then((response) => {
setMovie(response.data);
})
.catch((error) => {
console.log(error);
});}
useEffect(() => {
trendsTitles.map((title) => {
getData(title);
trends.push(movie);
setTrends(trends);
});}, [])

当我运行代码时，React Dev Tools将trends显示为一个空对象数组，其中包含比trendsTitle.length更多的对象。

提前感谢您的帮助。

Answer 1

setTrends和setMovie是异步的。

效果中的代码是同步的，因此trends.push(movie)将只执行trends.push({})。

此外，您永远不应该使用ReactuseState钩子来更改数据(引用是相同的，因此React不会重新渲染您的组件(。

喜欢这样的东西：

const [trends, setTrends] = useState([]);
const trendsTitles = [
"dune",
"annette",
"cendrillon",
"mon frere",
"athena",
"footloose",
];
async function getData(title) {
axios
.get("http://www.omdbapi.com/?apikey=[apikey]&t=" + title)
.then(res => {
setTrends(prevTrends => [...prevTrends, res.data])
})
.catch((error) => {
console.log(error);
});
}
useEffect(() => {
trendsTitles.map((title) => {
getData(title);
});
}, []);

Answer 2

你能试试这个plz.吗

setTrends([...trends],[...res.data])