Доступ к вложенному json в React

Question

Я могу успешно получить объект json из API. Однако, похоже, что проблема в обновлении состояния. После печати объекта я получаю ожидаемый и желаемый результат console.log(videos2.list[0]); дает 1-й элемент из атрибута списка объекта 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 равно нулю ...

Answer 1

В этой строке есть проблема

console.log (selectedVideo);

Вы распечатали неопределенную переменную.Это должно быть this.state.selectedVideo.

Answer 2

Ошибка selectedVideo is not defined возникает из-за того, что selectedVideo не является переменной, это ключ к объекту javascript, переданному в функцию this.setState.

//...
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);
 });  
}