在 React 中访问嵌套的 json答案

【问题标题】：Accessing nested json in React在 React 中访问嵌套的 json
【发布时间】：2018-06-23 16:08:52
【问题描述】：

我可以成功地从 api 获取 json 对象。但是，更新状态似乎存在问题。打印对象后，我得到了预期和期望的结果console.log(videos2.list[0]); 给出了 json 对象的列表属性中的第一项，您可以在此链接下查看 api 的外观： https://api.dailymotion.com/videos?fields=description,id,thumbnail_url,title,&limit=5&search=cars

但是，当使用 setState 属性 selectedVideo 更新状态时：videos.list[0] 是未定义的。

组件代码：

class App extends Component {
constructor(props) {
super(props)
this.state = {
    videos2:[],
    selectedVideo:null
}
this.DMSearch()
}

DMSearch(){
    fetch(`https://api.dailymotion.com/videos?fields=description,id,thumbnail_url,title,&limit=5&search=cars`)
    .then(result => result.json())
    .then(videos2 => {
        console.log(videos2.list[0]);
        this.setState({
           videos2: videos2.list, 
           selectedVideo: videos2.list[0]
        });
        console.log(selectedVideo);
     });  
    }  
render () {
    const DMSearch = this.DMSearch()
    return (
        <div>
            <SearchBar onSearchTermChange= {DMSearch}/>
            <VideoDetail video={this.state.selectedVideo}/> 
            <VideoList 
            onVideoSelect={selectedVideo=>this.setState({selectedVideo})}
            videos2={this.state.videos2}/>
        </div>
    )
}
}

确切的错误是Uncaught (in promise) ReferenceError: selectedVideo is not defined

videos2:list[0] 产生正确的结果，但是当分配给selectedVideo 时，它是undefined

根据要求，我还包括 vide_list 的代码，它使用对象形式的父组件，这可能会在此处产生错误：

const VideoList = (props) => {

    const videoItems = props.videos.map((video)=>{
        return (
        <VideoListItem 
            onVideoSelect={props.onVideoSelect}
            key={video.etag} 
            video={video} />
        )
    })

    return (
        <ul className="col-md-4 list-group">
            {videoItems}
        </ul>
    )
}

具体来说就是这一行

const videoItems = props.videos.map((video)=> {

在读取道具时导致错误。我相信这与selectedVideo 为空有关...

【问题讨论】：

我建议您从阅读ericlippert.com/2014/03/05/how-to-debug-small-programs 开始，了解有关如何调试代码的一些技巧。
如果您仍然需要帮助，请向我们展示VideoList 的代码以及它如何调用this.props.onVideoSelect()。此外，您应该清楚地指出哪一行代码导致了错误。
Undefined object in react js的可能重复
投反对票，因为这与您之前的问题完全相同。
不是，我已经自己解决了这个问题并用我的答案更新了问题，这里有不同的问题

标签： reactjs ecmascript-6

【解决方案1】：

这一行有问题

console.log(selectedVideo);

您打印出一个未定义的变量。应该是 this.state.selectedVideo。

【讨论】：

问题是它似乎没有自我更新。当我更改为 this.state.selectedVideo 时，它给出“null”
它将在那里被清空，因为 setState 是一个异步函数。它有一点延迟。但是 console.log(videos2.list[0]);显示你想要的数据？
那个显示它但是当我将选定的视频发送给子组件时，正如您在代码中看到的那样，它在那里被读取为未定义
问题可能出在 VideoDetail 组件中。虽然，这个 sn-p 中的某些内容应该被重构。你可以在这里发布 VideoDetail 的详细信息吗？

【解决方案2】：

错误selectedVideo is not defined 发生是因为selectedVideo 不是变量，它是传递给this.setState 函数的javascript 对象上的键。

//...
this.setState({
   videos2: videos2.list, 
   selectedVideo: videos2.list[0]
});
//...

您可以通过创建变量来缓解错误：

DMSearch(){
fetch(`https://api.dailymotion.com/videos?fields=description,id,thumbnail_url,title,&limit=5&search=cars`)
.then(result => result.json())
.then(videos2 => {
    console.log(videos2.list[0]);
    const selectedVideo = videos2.list[0]; // create variable
    this.setState({
       videos2: videos2.list, 
       selectedVideo: selectedVideo
    });
    console.log(selectedVideo);
 });  
}

【讨论】：