如何在提交表单时仅渲染一次React组件并执行单次异步OMDB调用？

你的核心问题是把所有逻辑都塞在App组件里，导致组件频繁重渲染时重复触发API请求。我们可以通过拆分独立Movie组件+精准控制渲染时机来解决这个问题，让API请求只执行一次。

第一步：创建独立的Movie组件 #

这个组件只负责电影数据的请求和渲染，并且仅在组件挂载时发起一次请求。

import React, { Component } from 'react';

class Movie extends Component {
  constructor(props) {
    super(props);
    this.state = {
      movie: null,
      error: '',
      isLoading: true
    };
  }

  // 组件挂载时仅发起一次API请求
  componentDidMount() {
    this.fetchMovie(this.props.title);
  }

  fetchMovie(title) {
    console.log(`Searching movie '${title}'`);
    // 用fetch替代XMLHttpRequest，代码更简洁
    fetch(`http://www.omdbapi.com/?t=${encodeURIComponent(title)}&apikey=6c3a2d45`)
      .then(response => {
        if (!response.ok) throw new Error(`${response.status}: ${response.statusText}`);
        return response.json();
      })
      .then(movie => {
        if (movie.Error) {
          this.setState({ error: movie.Error, isLoading: false });
        } else {
          this.setState({ movie, isLoading: false });
        }
      })
      .catch(error => {
        this.setState({ error: error.message, isLoading: false });
      });
  }

  render() {
    const { movie, error, isLoading } = this.state;

    if (isLoading) return <div>Loading movie details...</div>;
    if (error) return <div className="error">Error: {error}</div>;
    if (!movie) return null;

    // 渲染电影详情UI，和你原代码里的结构对应
    return (
      <div className="movie">
        <div className="row">
          <div className="col-xs-12 col-sm-3 col-md-2">
            <img 
              src={movie.Poster === "N/A" ? "" : movie.Poster} 
              className="img-responsive movie--image" 
              alt={movie.Title}
            />
          </div>
          <div className="col-xs-12 col-sm-9 col-md-10">
            <h2>{movie.Title} ({movie.Year})</h2>
            <p><strong>Rated:</strong> {movie.Rated}</p>
            <p><strong>Released:</strong> {movie.Released}</p>
            <p><strong>Runtime:</strong> {movie.Runtime}</p>
            <p><strong>Genre:</strong> {movie.Genre}</p>
            <p><strong>Director:</strong> {movie.Director}</p>
            <p><strong>Writer:</strong> {movie.Writer}</p>
            <p><strong>Actors:</strong> {movie.Actors}</p>
            <p><strong>Plot:</strong> {movie.Plot}</p>
            <p><strong>Language:</strong> {movie.Language}</p>
            <p><strong>Awards:</strong> {movie.Awards}</p>
            <p><strong>IMDB Rating:</strong> {movie.imdbRating} ({movie.imdbVotes} votes)</p>
            <p><strong>Type:</strong> {movie.Type}</p>
          </div>
        </div>
      </div>
    );
  }
}

export default Movie;

第二步：修改App组件，控制Movie的渲染时机 #

简化App组件的状态，只负责搜索逻辑和Movie组件的渲染开关。

1. 导入Movie组件 #

import Movie from './Components/Movie'; // 根据你的文件路径调整

2. 简化App的状态 #

删除原来存储电影详情的冗余字段：

constructor(){
  super();
  this.state = {
    movieSearchTerm: '',
    error: '',
    languageIndex: 0,
    searchSubmitted: false
  }
  // 绑定方法保持不变
  this.onChangeMovieInput = this.onChangeMovieInput.bind(this);
  this.onSubmitMovieForm = this.onSubmitMovieForm.bind(this);
  this.switchLanguageTo = this.switchLanguageTo.bind(this);
}

3. 修改搜索提交逻辑 #

确保只有输入有效内容时才触发搜索：

onSubmitMovieForm(e){
  e.preventDefault();
  const trimmedTerm = this.state.movieSearchTerm.trim();
  
  if (trimmedTerm) {
    this.setState({ searchSubmitted: true, error: '' });
  } else {
    this.setState({ error: 'Please enter a valid movie title' });
  }
}

4. 控制Movie组件的渲染 #

只有当searchSubmitted为true且有有效搜索词时，才渲染Movie组件：

render() {
  const { searchSubmitted, movieSearchTerm, error, languageIndex } = this.state;

  return (
    <div>
      <Navbar languageIndex={languageIndex} switchTaal={this.switchLanguageTo} />
      <div className="App container-fluid mt-large">
        {/* 搜索表单 */}
        <div className="row">
          <div className="col-xs-12">
            <form onSubmit={this.onSubmitMovieForm}>
              <input 
                type="text" 
                className="width-100p" 
                onChange={this.onChangeMovieInput}
                value={movieSearchTerm} // 设为受控组件
              />
              <button type="submit" className="width-100p btn btn-primary">Search</button>
            </form>
          </div>
        </div>

        {/* 错误提示 */}
        {error && (
          <div className="row mt-medium">
            <div className="col-xs-12">
              <p className="error">Error: {error}</p>
            </div>
          </div>
        )}

        {/* 仅在搜索提交且有有效词时渲染Movie */}
        {searchSubmitted && movieSearchTerm.trim() !== '' && (
          <div className="row mt-medium">
            <Movie title={movieSearchTerm} />
          </div>
        )}
      </div>
    </div>
  );
}

为什么这样能解决重复请求？ #

1. Movie组件仅挂载一次：只有点击搜索按钮后，Movie才会被首次渲染，componentDidMount只会执行一次，API请求仅触发一次。
2. 避免不必要的重渲染：App组件的其他状态变化（比如语言切换）不会导致Movie组件重新挂载，只要搜索词不变，就不会重复请求。
3. 职责分离：App负责搜索逻辑和状态管理，Movie负责数据请求和详情渲染，代码更清晰易维护。

内容的提问来源于stack exchange，提问作者Johnnybossboy