javascript - 使用 Axios 请求填充 React 状态
问题描述
第一个请求给了我数据库中的 ID,并将结果放入状态。我用它来向 API 请求每个 ID 的电影数据库。
我需要将来自 API 的数据置于第二种状态。
问题是最后只剩下一个胶片数据。
之后,我想在状态上使用地图功能,但我不知道是否可以。
function App() {
const [movieid, setMovieid] = useState([]);
const [movieinfos, setMovieinfos] = useState([]);
useEffect(() => {
axios
.get("http://localhost:5000")
.then(function (response) {
// handle success
console.log(response.data.movies);
setMovieid(response.data.movies);
})
.catch(function (error) {
// handle error
console.log(error);
});
}, []);
console.log(movieid);
useEffect(() => {
for (const movie of movieid) {
console.log(movie.movieid);
axios
.get(`${BASE_URL}${movie.movieid}?api_key=${API_KEY}&language=fr`)
.then(function (response) {
// handle success
console.log(response);
setMovieinfos(...movieinfos, response.data);
})
.catch(function (error) {
// handle error
console.log(error);
});
}
}, [movieid]);
useEffect(() => {
console.log(movieinfos);
}, [movieinfos]);
return (
<div className="App">
<div className="Header">
<Logo />
</div>
<div className="Menu">
<Search />
<Add_movie_button />
<Delete_movie_button />
<Random_movie_button />
</div>
<div className="Movies">
{movieid.map((movie) => (
<Movie_card />
))}
</div>
</div>
);
}
export default App;
解决方案
通过放置一个数组解决了问题(我第一次尝试时放错了位置)
function App() {
const [movieid, setMovieid] = useState([]);
const [movieinfos, setMovieinfos] = useState([]);
let moviesData = []
useEffect(() => {
axios.get('http://localhost:5000')
.then(function (response) {
// handle success
console.log(response.data.movies)
setMovieid(response.data.movies)
})
.catch(function (error) {
// handle error
console.log(error);
})
}, []);
console.log(movieid)
useEffect(() => {
for (const movie of movieid) {
console.log(movie.movieid)
axios.get(`${BASE_URL}${movie.movieid}?api_key=${API_KEY}&language=fr`)
.then(function (response) {
// handle success
console.log(response)
moviesData.push(response.data)
setMovieinfos(
moviesData
);
})
.catch(function (error) {
// handle error
console.log(error);
})
}
}, [movieid]);
useEffect(() => {
console.log(movieinfos)
}, [movieinfos]);
return (
<div className="App">
<div className="Header">
<Logo />
</div>
<div className="Menu">
<Search />
<Add_movie_button />
<Delete_movie_button />
<Random_movie_button />
</div>
<div className="Movies">
{movieid.map(movie => <Movie_card />)}
</div>
</div>
);
}
export default App;
推荐阅读
- java - 我试图登录并重新排列 Android Studio,我使用了 firebase。但是当我运行时屏幕会立即打开和关闭
- node.js - nodejs mssql没有在PUT上返回数据
- c - 字符限制被忽略 [c]
- javascript - 如何解决承诺功能
- html - 窗户上的中心垫卡
- c++ - clang 编译器说:变量“ptr”可能未初始化
- javascript - [Python][Javascript] 无法弄清楚如何将 API 调用从 NEXTjs 网页 GUI 发送到 Python Falcon 后端
- azure - 在使用 Azure 空间锚点时,我还需要考虑哪些其他 Azure 服务?
- python - 在 tensorflow-gpu 2.0 上计算 WGAN-GP 的梯度惩罚失败
- umbraco - UmbracoCms 以错误结束:此 SqlTransaction 已完成;它不再可用