передача информации JSON ребенку - PullRequest
Новая
       0

передача информации JSON ребенку

0 голосов
/ 25 октября 2019

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

Это основной компонент приложения

class App extends Component {

  state = {
    items:[],
    didLoad: false
  }

  async componentDidMount() {
    const url = "https://api.songkick.com/api/3.0/artists/4971683/calendar.json?apikey={mykey}"
    const response =  await fetch(url);
    const data = await response.json();
    this.setState({items:data});
    console.log(this.state.items)
  }

  render() {
    return (
      <div className="App">
        <Header/>
        <Element name = 'Featured'>
          <Featured data1 = {this.state.items}/>
        </Element>
        <Element name = "Venue_info">
          <VenueInfo/>
        </Element>
        <Element name = "Highlights">
          <Highlights/>
        </Element>
        <Element name = "Pricing">
          <Pricing/>
        </Element>
        <Element name = "Location">
          <Location/>
        </Element>
        <Footer/>
      </div>
    );
  }
}

и это рекомендуемый компонент, для которого я хочу использовать информацию API на 

const Featured = (props) => {
    console.log(props)
    return (
        <div style = {{position: 'relative'}}>

            <Carrousel/>
            <div className = "artist_name">
                <div className = "wrapper">
                    Arianna Grande
                </div>
            </div>
            <TimeUntil deadline = {props.data1.resultsPage.results.event[0].start.datetime}/>
        </div>


    );
};

, только что использовал mykey в качестве заполнителя, но у меня есть apikey для этого API.

1 Ответ

1 голос
/ 25 октября 2019

в состоянии вы объявляете элемент как массив items = [], поэтому вам нужно обращаться к нему как к массиву, а не как к объекту, 

const Featured = (props) => {
    console.log(props)
    return (
        <div style = {{position: 'relative'}}>
            <Carrousel/>
            <div className = "artist_name">
                <div className = "wrapper">
                    Arianna Grande
                </div>
            </div>
            <TimeUntil deadline = 
                  {props.data1[0].resultsPage.results.event[0].start.datetime}/>
        </div>


    );
};
...