@MajorTom69

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

начал изучать 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;
  • Вопрос задан
  • 1662 просмотра
Решения вопроса 1
rockon404
@rockon404 Куратор тега React
Frontend Developer
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;
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы