Компонент React js, как добавить фид json

avatar
user3853257
8 апреля 2018 в 10:35
94
0
0

Я пытаюсь создать компонент реагирования, который принимает URL-адрес фида в качестве реквизита, а затем отображает данные. в коде: 1-LeagueInfo дочерний компонент LeageMatch. 2-родительский компонент LeageMatch, это основной компонент, и я передаю фид в LeaguInfo (это дочерний элемент) в качестве реквизита в index.js

`

/////LeagueInfo-Child compnent////
import React, { Component } from 'react';
class LeagueInfo extends Component{
    constructor(props){
        super(props);
        this.state = {
            error: null,
            isLoading : false,
            league : '',
            feed : this.props.feed
        }
        this.apiUrl = process.env.REACT_APP_API_URL;
        console.log(this.apiUrl);
         this.API =this.apiUrl+this.state.feed+".json"    

    }
    componentDidMount(){
     // const API =this.apiUrl+this.state.feed+".json"  ???      
        this.setState({ isLoading: true });
        fetch(this.API,{
            method: 'get',
            dataType: 'json',
            headers: {
              'Accept': 'application/json',
              'Content-Type': 'application/json'
            }
          })
          .then((response) => response.json())
          .then(data=>{
             let  league = <p> <img src={"feedurl"+(data.competitionId)+".png"} /> {data.competitionName}</p>;
              
              this.setState({league: league});
          })
          .catch(error => this.setState({ error, isLoading: false }));
    }
    render(){
        return(
            <h2>
           {this.state.league}
           </h2>
        );
    }
}

export default LeagueInfo;

/////LeageMatch-Parent compnent////
import React, { Component } from 'react';
import LeagueInfo from './LeagueInfo'



class LeagueMatch extends Component {
  constructor(props){
    super(props);
    this.state = {};
  }
  render() {
    return (
        <LeagueInfo feed={this.props.leagueInfofeed} />
    ...);
    }
 }
}

export default LeagueMatch;

//index.js
const LeagueMatchWrapper = document.getElementById('leaguematch-wrapper');
ReactDOM.render(<LeagueMatch  leagueInfofeed="league"/>  LeagueMatchWrapper);

` в коде Я новичок, чтобы реагировать, так что есть несколько вопросов:

  1. это правильный способ добавить фид в компонент.
  2. должен ли я добавить фид в состояние компонента как feed : this.props.feed.
  3. если я объявлю API канала в componentDidMount() как: const API =this.apiUrl+this.state.feed+".json", когда компонент сначала отображает правильные данные, а затем скрывает их, могу ли я знать, почему?
  4. если обновленный фид реагирует, автоматически перерисовывает компонент, или мне нужно добавить какой-нибудь список
Источник
Satej S
8 апреля 2018 в 11:45
0

Можете ли вы дать больше информации о том, как ваш пользовательский интерфейс? Будет ли информация о нескольких лигах? Будут ли для всех них разные вызовы API?

user3853257
8 апреля 2018 в 12:40
0

@SatejS, да, на каждой странице будет информация о нескольких лигах, поэтому я хотел добавить ее в реквизит, чтобы я мог передавать разные каналы для каждого компонента.

Ответы (0)