Question

我正在尝试将此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作为占位符，但我确实为此API有一个apikey。

Answer 1

在您将item声明为数组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>


    );
};

将json信息传递给孩子

1 个答案: