Reactjs 将json信息传递给子对象

我试图将这个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>
    );
  }
}

类应用程序扩展组件{
状态={
项目：[]，
didLoad:错误
}
异步组件didmount（）{
常量url=”https://api.songkick.com/api/3.0/artists/4971683/calendar.json?apikey={mykey}”
const response=等待获取（url）；
const data=wait response.json（）；
this.setState（{items:data}）；
console.log（this.state.items）
}
render（）{
返回(
);
}
}

这是我想使用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>


    );
};

const特色=（道具）=>{
控制台日志（道具）
返回(
阿丽安娜格兰德酒店
);
};

---

刚刚使用mykey作为占位符，但我确实有一个用于此api的apikey。

在您将项声明为数组的状态下

项=[]

，因此您需要将其作为数组而不是对象进行访问

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>


    );
};

const特色=（道具）=>{
控制台日志（道具）
返回(
阿丽安娜格兰德酒店
);
};

api是否返回未定义？如果是这样的话，您的问题是url字符串<代码>常量url=`https://api.songkick.com/api/3.0/artists/4971683/calendar.json?apikey=${mykey}`此url使用插值插入密钥。请注意url字符串开始和结束处的“character而不是your”。您还需要在{mykey}之前添加$。我的key不是问题所在，我仍然会收到作为json元素返回的数据，我正在尝试检索事件开始日期。{mykey}是我的api key的占位符，包括花括号sso…is console.log（props）控制台中的日志记录未定义？TimeUntil组件是否抛出错误？请共享更多详细信息。在我看来，TimeUntil传递的道具中可能存在错误。传递的道具中没有类似于

道具的东西。data1

。您可能缺少

[]

。我已通过@nir99尝试了此解决方案，但没有任何帮助。我已决定截断app.js开头的数据，并将较小的截止日期数据传递到子组件中。不过，感谢您的帮助！这仍然不起作用，并给了我一个resultsPage未定义的错误。我已决定将数据分块到我的主app.js和p中使用这些信息而不是整个json文件，现在它就可以工作了。谢谢你的帮助