Api запрос из react приложения выполняется только один раз, что делать?

Question

[MajorTom69]

начал изучать react, решил написать приложение которое бы использовало стороний api, выбираю введеные в форму данные(название фильма) и передаю с вызовом стороннего класса для выполнения api запроса, НО по дефолту названия фильма нет и там идет Undefined, и он ищет его, но после смены названия через форму ничего не меняется, хотя переменная хранящая текущее название меняется как надо.

render() {
    return (
    	<div>
        <form onSubmit={this.handleSubmit}>
          <label htmlFor="title">Enter title</label>
          <input id="title" name="title" type="text" />

          <button>Send data!</button>
        </form>
// тут вызывается класс работающий с api и он не меняется при повоторном сабмите
        <FilmDisplay filmName={this.state.res}/>
// название же меняется
        {this.state.res}
    	</div>
    );
  }

import React from 'react';

class FilmDisplay extends React.Component {
  constructor() {
   super();
   this.state = {
     filmData: null
   };
 }
 componentDidMount() {
   const filmName = this.props.filmName;
   const URL = "http://www.omdbapi.com/?t=" + filmName + "&apikey=6540f2ec&";
    console.log(URL);
   fetch(URL).then(res => res.json()).then(json => {
     this.setState({ filmData: json });
   });
 }
 render() {
   const filmData = this.state.filmData;
   if (!filmData) return <div>Loading</div>;
   return <div>{JSON.stringify(filmData)}</div>;
 }
}
export default FilmDisplay;

Answer 1

[Антон Спирин]

render() {
  const { res } = this.state;
  const shouldFlimDisplayShown = !!res;

  return (
    <div>
      <form onSubmit={this.handleSubmit}>
        <label htmlFor="title">Enter title</label>
        <input id="title" name="title" type="text" />
        <button>Send data!</button>
      </form>
      {shouldFlimDisplayShown && <FilmDisplay filmName={res}/>}
   </div>
  );
}

import React from 'react';

class FilmDisplay extends React.Component {
   constructor() {
    super();

    this.state = {
      filmData: null
    };
  }

  componentDidMount() {
    this.fetchMovie();
  }

  componentDidUpdate(prevProps) {
    if (prevProps.filmData !== this.props.filmData) {
      this.fetchMovie();
    }
  }
 
  fetchMovie() {
    const { filmName } = this.props;
    const URL = "http://www.omdbapi.com/?t=" + filmName + "&apikey=6540f2ec&";

    fetch(URL).then(res => res.json()).then(json => {
      this.setState({ filmData: json });
    });
  }

  render() {
    const { filmData } = this.state;

    if (!filmData) return <div>Loading</div>;
  
    return <div>{JSON.stringify(filmData)}</div>;
  }
}

export default FilmDisplay;