我目前正在使用来自 OMDB API 的数据在 React.js 中开发一个类似 imdb 的小项目。为了提取数据，我首先编译了一个 imdbID 列表，然后从 API 调用这些端点以获取更详细的数据。
但是，当我将数据添加到数组时，对象会正确显示在 console.logs 中，但数组的长度仍然为零。这使我无法在 React 中显示该数据。
例如：
如您所见，这里的电影详细信息数组充满了对象，但长度为零。
我很感激任何关于我是否真的正确地将数据推送到数组的见解，因为我似乎无法从其他反应组件中的电影细节数组中访问数据。
这是我正在使用的代码：
const App = () => {
const [movies, setMovies] = useState([])
const [movieData, setMovieData] = useState([])
const [searchValue, setSearchValue] = useState('')
const movieids = []
const moviedetails = []
const getMovieRequest = async (searchValue) => {
const url = `http://www.omdbapi.com/?s=${searchValue}&apikey=263d22d8`
const response = await fetch(url)
const responseJson = await response.json()
if (responseJson.Search) {
setMovies(responseJson.Search)
}
};
const generateMovieIds = ()=>{
movies.forEach(element => {
const currentid = element.imdbID
movieids.push(currentid)
});
}
const getMovieDetails = async (idValue) => {
const url = `http://www.omdbapi.com/?i=${idValue}&apikey=263d22d8`
const response = await fetch(url)
const responseJson = await response.json()
moviedetails.push(responseJson)
};
const generateMovieDetails = async()=>{
for(const element of movieids){
await getMovieDetails(element)
}
}
useEffect(() => {
getMovieRequest(searchValue)
generateMovieIds()
generateMovieDetails()
console.log(movies.length + ' LENGTH OF MOVIES')
console.log(movies)
console.log(moviedetails.length + ' LENGTH OF MOVIEDETAILS')
console.log(moviedetails)
console.log(movieids.length + ' LENGTH OF MOVIEIDS')
console.log(movieids)
}, [searchValue])
return (
<div className='container-fluid movie-app'>
<div className='row d-flex align-items-center mt-4 mb-4'>
<Heading heading='Movies' />
{movies.length}
vs
{moviedetails.length}
<Searchbar searchValue={searchValue} setSearchValue={setSearchValue} />
</div>
<div className='row'>
<Movies moviedetails={moviedetails} />
</div>
</div>
);
};
export default App;