渲染前如何更新状态？

Question

constructor(props) {
super(props);
this.state = {
  movie: "Interstellar",
  movies: [],
  newMovieParsed: {
    movieTitle: '',
    moviePosters: '',
    moviePlot: '',
    movieGenre: '',
    movieBoxOffice: '',
    movieRatings: [],
    movieActors: '',
    imdbId: '',
  }
};

}

  onSubmit = movie => {
this.setState(state => ({ ...state, movie }));
this.componentWillMount();
};

  componentWillMount() {
    this.APIURL = `http://www.omdbapi.com/? s=${this.state.movie}&apikey=${API_KEY}`;
    console.log(this.APIURL);

fetch(this.APIURL)
  .then(resp => resp.json())
  .then(data => {
    const movies = data.Search;
    this.setState(state => ({
      ...state, movies
    }));


  });
}

Now in the render

<Search
          placeholder="Enter the title of a movie you wish to search and press Enter .."
          onSearch={(value) => this.onSubmit(value)}
          style={{ width: '100%' }}
        />

Everything works but when I put a new movie and press enter I have to enter twice. The first enter seems to be updating the state then the second updates the render. How do i update the state and render it with the first enter? I am also using Ant-design.

Answer 1

The main thing is your setState callback should either be the name of the function (no parenthesis) or an anonymous function that calls it:

onSubmit = movie => {
this.setState(state => ({ ...state, movie }));
this.componentWillMount;
};

OR

onSubmit = movie => {
this.setState(state => ({ ...state, movie }));
() => this.componentWillMount();
};

Other hints: Usually you don't call lifecycle methods directly (componentWillMount), and you don't need to do that much work in setState. You can set just the key you want to replace.

Here is some optimized code if you are interested:

constructor(props) {
  super(props);
  this.state = {
    movie: "Interstellar",
    movies: [],
    newMovieParsed: {
      movieTitle: '',
      moviePosters: '',
      moviePlot: '',
      movieGenre: '',
      movieBoxOffice: '',
      movieRatings: [],
      movieActors: '',
      imdbId: '',
    }
  };
}

onSubmit = movie => {
  this.setState({movie}), this.fetchMovie); 
};

componentWillMount() {
  this.fetchMovie();
}

fetchMovie() {
  this.APIURL = `http://www.omdbapi.com/? s=${this.state.movie}&apikey=${API_KEY}`;
  console.log(this.APIURL);

  fetch(this.APIURL)
    .then(resp => resp.json())
    .then(data => {
      const movies = data.Search;
      this.setState(state => ({
        ...state,
        movies
      }));
    });
}

Answer 2

There is no reason to get whole list of movies every time you update state. In componentWillMount() you can do initial fetch of movies and then on submit you can just update the state with new movie. If needed you can call React.forceUpdate() to trigger render method.

constructor(props) {
    super(props);
    this.state = {
      movie: "Interstellar",
      movies: [],
      newMovieParsed: {
        movieTitle: '',
        moviePosters: '',
        moviePlot: '',
        movieGenre: '',
        movieBoxOffice: '',
        movieRatings: [],
        movieActors: '',
        imdbId: '',
       }
    };
  }
  componentWillMount() {
       this.getMovies();
  });
  getMovies = () => {
    this.APIURL = `http://www.omdbapi.com/? s=${this.state.movie}&apikey=${API_KEY}`;
      console.log(this.APIURL);

      fetch(this.APIURL)
       .then(resp => resp.json())
       .then(data => {
          const movies = data.Search;
          this.setState(state => ({
            ...state, movies
          }));  
    }
    onSubmit = movie => {
      this.setState(state => ({ ...state, movie }));
    };

 }