React setState if Axios.get response data is good

Question

Currently I am making axios request and setting the response data to my state.

I have discovered some data have 'poster_path' of null (No image).

I want to remove those data before setState in componentDidMount.

I have tried the following but causes error.

    componentDidMount() {
        let url = "".concat(baseURL, '?api_key=', APIKEY, configData, `&with_genres=${genreID}`)
        axios.get(url)

        .then(res => 
            if (res.data.results.poster_path != null){
            this.setState({movies: res.data.results},()=>{
                console.log(this.state.movies);
            })
        }
        )}

Any help is greatly appreciated.

export class Documentary extends Component {
    constructor (props) {
        super (props) 
            this.state = {
                movies:[]
            };
    }

    componentDidMount() {
        let url = "".concat(baseURL, '?api_key=', APIKEY, configData, `&with_genres=${genreID}`)
        axios.get(url)

        .then(res => 
            this.setState({movies: res.data.results},()=>{
                console.log(this.state.movies);
            })
        )}

.....render...

The API data looks like the following

{
  "page": 1,
  "total_results": 10000,
  "total_pages": 500,
  "results": [
    {
      "popularity": 27.169,
      "vote_count": 0,
      "video": false,
      "poster_path": "/4RtCBnCnsEqcTQejPQ1lIiCE75r.jpg",
      "id": 680438,
      "adult": false,
      "backdrop_path": "/aejCGlzSRY3nVmB23IpBiXuoXzW.jpg",
      "original_language": "en",
      "original_title": "After Truth: Disinformation and the Cost of Fake News",
      "genre_ids": [
        99
      ],
      "title": "After Truth: Disinformation and the Cost of Fake News",
      "vote_average": 0,
      "overview": "An investigation into the ongoing threat caused by the phenomenon of “fake news” in the U.S., focusing on the real-life consequences that disinformation, conspiracy theories and false news stories have on the average citizen.",
      "release_date": "2020-03-19"
    },
    {
      "popularity": 25.04,
      "vote_count": 0,
      "video": false,
      "poster_path": "/rODi66xlhEIaHs2krHlj4A8da5f.jpg",
      "id": 674334,
      "adult": false,
      "backdrop_path": "/rjtXLRO0ixmbjoQM27Rj7rFRWe9.jpg",
      "original_language": "en",
      "original_title": "Climbing Blind",
      "genre_ids": [
        99
      ],
      "title": "Climbing Blind",
      "vote_average": 0,
      "overview": "Blind climber Jesse Dufton's ascent of the Old Man of Hoy.",
      "release_date": "2020-03-20"
    },
    {
      "popularity": 24.492,
      "vote_count": 0,
      "video": false,
      "poster_path": null,
      "id": 674338,
      "adult": false,
      "backdrop_path": null,
      "original_language": "en",
      "original_title": "Amber and Me",
      "genre_ids": [
        99
      ],

Answer 1

You can try this out. Just filter your movie data before setting the state.

axios.get(url)
    .then(res => {
        if (res.data) {
            const movieData = res.data.results.filter(movie => movie.poster_path != null);
            this.setState({movies: movieData}, () => {
                console.log(this.state.movies);
            });
        }
    }

Answer 2

您可以使用filter方法创建一个新数组，以删除带有null的poster_path的电影，如果这是您想要做的。