渲染前如何更新状态？

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
    }));


  });
}

现在在渲染中

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

一切正常，但是当我放新电影并按Enter时，我必须输入两次。 第一个输入似乎正在更新状态，然后第二个更新渲染。 我如何更新状态并使用第一个Enter呈现它？ 我也在使用Ant设计。

Answer 1

最主要的是您的setState回调应该是函数的名称（不带括号）或调用它的匿名函数：

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

要么

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

其他提示：通常，您不直接调用生命周期方法（componentWillMount），也不需要在setState中做太多工作。 您可以仅设置要替换的密钥。

如果您有兴趣，下面是一些优化的代码：

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

每次更新状态时，没有理由获得完整的电影列表。 在componentWillMount（）中，您可以进行电影的初始获取，然后在提交时就可以使用新电影来更新状态。 如果需要，您可以调用React.forceUpdate（）来触发渲染方法。

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 }));
    };

 }