Реагировать | передать URL-адрес данных от детей после щелчка по брату - PullRequest
Новая
       8

Реагировать | передать URL-адрес данных от детей после щелчка по брату

0 голосов
/ 08 января 2019

У меня есть приложения для фильмов. Я получаю данные из API TMB. По умолчанию мне показываются популярные видео, но у меня есть список, который меняет мой URL на другие списки. И теперь проблема начинается. Я не могу передать URL-данные после onClick на одноуровневый элемент из компонента Nav в компонент ListApp. Потому что у меня есть одна функция, чтобы закрыть навигацию. А также, я не знаю, как использовать их в родительском для замены используемых URL популярных.

Код: https://codesandbox.io/s/9z6yll4r6r

Заранее благодарю за помощь.

Дочерний компонент Nav.js (здесь у меня есть список в Nav.js с новым URL) 

import React, { Component } from 'react';
import { NavLink } from "react-router-dom";

class Navigation extends Component{

    constructor(props){
        super(props);

        this.state = {
            active: false
        };
        this.toggleClass = this.toggleClass.bind(this);
    };

    // toggle Class after click menu and li elements or X
    toggleClass(){
        const currentState = this.state.active;
        this.setState({ active: !currentState });
    };
    render(){
        return(
            <nav className="navigation">   
                <NavLink to="/" className="navigation__link navigation__link--back"><span className="fa fa-angle-left navigation__icon"></span></NavLink>
                <button id="navBtnOpen" className="navigation__link navigation__link--list" onClick={this.toggleClass}>
                    <span className="fa fa-bars navigation__icon"></span>
                    <span className="navigation__title">MOVIE LISTS</span>
                </button>
                <div id="navList" className={"navigation__list " + (this.state.active ? 'navShow': null)}>
                    <button id="navBtnClose" className={"navigation__list-btn " + (this.state.active ? 'showXBtn': null)}><span className="fa fa-times" onClick={this.toggleClass}></span></button>

                    <div className="navigation__list-cont">
                        **<a href="#" className="navigation__list-item" id="popular" url={"https://api.themoviedb.org/3/movie/top_rated?api_key=642874b006093ef1d8becb7a5a90179c&page=1"} onClick={ (this.toggleClass)(this.url)}>Most popular</a>

                        <a href="#" className="navigation__list-item" id="nowPlaying" url={"https://api.themoviedb.org/3/movie/now_playing?api_key=642874b006093ef1d8becb7a5a90179c&page=1"} onClick={this.toggleClass}>Now playing</a>

                        <a href="#" className="navigation__list-item" id="topRated" url={"https://api.themoviedb.org/3/movie/top_rated?api_key=642874b006093ef1d8becb7a5a90179c&page=1"} onClick={this.toggleClass}>Top rated</a>

                        <a href="#" className="navigation__list-item" id="upcoming" url={"https://api.themoviedb.org/3/movie/top_rated?api_key=642874b006093ef1d8becb7a5a90179c&page=1"} onClick={this.toggleClass}>Upcoming</a>**
                    </div>
                </div>
            </nav>
        )
    }
}
export default Navigation;

Родитель с классом ListApp.js 

import React, { Component } from 'react';
import Card from "./Card";

class ListApp extends Component {
    constructor(props){
        super(props);
        this.state = {
            items: [],
            isLoaded: false,
        }
        // this.fetchApi = this.fetchApi.bind(this);
    }
    fetchApi(){
        const urlApi = "https://api.themoviedb.org/3/movie/popular?api_key=642874b006093ef1d8becb7a5a90179c&page=1";

        return urlApi;

    }

    componentDidMount = () => {
        fetch(this.fetchApi())
        .then(resp => resp.json())
        .then(resp => {
            this.setState({
                isLoaded: true,
                items: resp.results
            })
            console.log(this.state.items)

    })  
};
    render() {
        var {isLoaded, items} = this.state;

        return (
            <div className="movie-section" id="movie-section">
                {items.map( (item) => ( <Card key={item.id} item={item} /> ) )};
            </div>

        );
    }
}

export default ListApp;

--- ОБНОВЛЕНИЕ 1 ---

Я делаю что-то с этого сайта https://codeburst.io/no-redux-strategy-for-siblings-communication-3db543538959, но теперь у меня есть другая проблема.

Я передаю данные брату и сестре и хочу обновить загружаемый URL. Поэтому я использовал componentDidUpdate, но функция callback () по-прежнему вызывает циклы для выборки, когда я нажимаю на ссылку в навигации. Есть ли другой способ, чтобы это не вызывало этот цикл? Я обновил коды andbox.

1 Ответ

0 голосов
/ 09 января 2019

В Parent.js:

  1. Создайте метод с именем onLinkChange(e), который устанавливает this.state.data в e (url) и передайте метод в Navigation как prop.
  2. Дайте ListApp опору под названием data и установите ее на this.state.data.

В Nav.js при нажатии на ссылку звоните this.props.onLinkChange(url).

Когда вы нажимаете на ссылку, она вызывает onLinkChange() и устанавливает новое состояние данных, которое будет URL, в результате чего ListApp будет иметь доступ к новому URL через this.props.data

Более подробное объяснение здесь: https://codeburst.io/no-redux-strategy-for-siblings-communication-3db543538959

...