用 Axios 请求填充 React state

Question

The first request give me IDs from my database, and put results in state. I use it to make a request to the API The movie database for each ID.

I need to put data from the API in the second state.

The problem is that only one film data remains at the end.

After that, I would like to use the map function on the state, but I don't know if it's possible.

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;

Answer 1

Problem solvedby putting an array (i had misplaced it when I tried first)

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;