ReactJS повторно составить композитор с другими данными - PullRequest
Новая
       3

ReactJS повторно составить композитор с другими данными

0 голосов
/ 23 апреля 2020

У меня проблема с 1 компонентом. Компонент позволяет искать фильмы и отображает фильмы. Мне нужно иметь два раза этот компонент, но когда я ищу в строке поиска одного из них, он отображается на обоих.

Панель инструментов - это место, где я отрисовываю или перерисовываю свой компонент

У React есть решение для этого? Спасибо за вашу помощь

SearchBarMov ie: 

const socket = io('http://localhost:5555');

class SearchBarMovie extends Component {
    constructor(props) {
        super(props)
        this.state = {}
    }
    searchChangeHandler(event) {
        const searchTerm = event.target.value;
        if (searchTerm.length > 0) {
            socket.emit('search', searchTerm);
            socket.on('from-api', (data) => {
                data = JSON.parse(data)
                var results = data.results;
                console.log(results);

                var movieCards = [];
                for (var i = results.length - 1; i >= 0; i--) {
                    results.poster_src =
                        "https://image.tmdb.org/t/p/w185" + results[i].poster_path;
                    const movieCard = (
                        <MovieCard
                            key={results[i].id}
                            movie={results[i]}
                            posterSrc={results.poster_src}
                        />
                    );
                    movieCards.push(movieCard);
                }
                this.setState({ rows: movieCards });
            })
        } else {
            this.state.rows = "null"
        }
    }

    render() {
        return (
            <div className={this.props.className}>
                <input
                    onChange={this.searchChangeHandler.bind(this)}
                    placeholder="Enter search term"
                />
                <div className="movieCards">
                    {this.state.rows}
                </div>
            </div>
        );
    }
}

export default SearchBarMovie;

Панель управления 

class Dashboard extends Component {
  render() {
    return (
      <div>
        <div className='row widgets'>
          <SearchBarMovie className='Search col s12 m4 l4' />
          <div className='col s12 m4 l4'>
            <Weather />
          </div>
          <div className='col s12 m4 l4'>
            <RSS />
          </div>
        </div>
        <div className='row widgets'>
          <SearchBarMovie className='Search col s12 m4 l4' />
          <div className='col s12 m4 l4'>
            Module
          </div>
          <div className='col s12 m4 l4'>
            <RSS />
          </div>
        </div>
      </div>

    )
  }
}

export default Dashboard

ссылка на проект здесь git@gitlab.com: floriancargouet / DEV_dashboard_2019. git

1 Ответ

0 голосов
/ 23 апреля 2020

Может быть, это socket.io, который делает это. Я, вероятно, должен использовать что-то другое, чем API в реальном времени

...