Реагировать DOM не обновляя, хотя состояние и реквизит - PullRequest
Новая
       25

Реагировать DOM не обновляя, хотя состояние и реквизит

0 голосов
/ 17 июня 2019

Я хочу использовать map () для итерации и добавления в мой DOM в реакции, однако мой DOM не обновляется.

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

App.js 

class App extends Component {
...
    searchThis() {
        axios.get("/getYoutube", {params: {searchString: this.state.searchVal}}).then(({ data }) => {
            this.setState({
                youtubeVids: data.resp.items
            })
        })
    }

    render() {
        if (this.state.youtubeVids.length > 0) {
            console.log(this.state.youtubeVids[0].snippet.thumbnails.default.url)

            return (
                <div className="app-container">
                    <div className="app-header">
                        <h1>YouTube API App</h1>
                    </div>
                    <div className="app-body">
                        <div className="each-body-section">
                            <SearchResults 
                                youtubeVids = {this.state.youtubeVids}
                            />
                        </div>
                    </div>
                </div>
            );
        }
    }
}

export default App;

Прямо сейчас я передаю результаты API сервера во внешний интерфейс, используя setState() и Axios с помощью метода searchThis(), который я успешно регистрирую и вижу в своей консоли из моего props. Однако в SearchResults.js ничего не обновляется в DOM SearchResults.js 

import React from "react";

const SearchResults = props => {
    console.log("props in search ", props.youtubeVids)

    return (
    <div className="each-body-section video-container">
            {props.youtubeVids.map((video) => {
                <div key={video.id.videoId}>
                    <div className="video-title">
                        <h2>{video.snippet.title} </h2>
                    </div>
                    <div>
                        <img src={video.snippet.thumbnails.high.url} />
                    </div>
                    <div>
                        <p>{video.snippet.description}</p>
                    </div>
                </div>
            })}
    </div>
    )
}

export default SearchResults

1 Ответ

0 голосов
/ 17 июня 2019

Ну, это потому, что вы пытаетесь отобразить пустой массив в SearchResults.js

Измените SearchResults.js на приведенный ниже код и повторите попытку: 

import React, { Component } from 'react';

class SearchResults extends Component {

    render() {
        console.log(this.props.youtubeVids);
        if (this.props.youtubeVids.length > 0) {
            var youtubeVidsMap = this.props.youtubeVids.map((video) => <div key={video.id.videoId}>
                <div className="video-title">
                    <h2>{video.snippet.title} </h2>
                </div>
                <div>
                    <img src={video.snippet.thumbnails.high.url} />
                </div>
                <div>
                    <p>{video.snippet.description}</p>
                </div>
            </div>);

        }
        return (

            <div className="each-body-section video-container">
                {youtubeVidsMap}
            </div>
        );
    }
}

export default SearchResults;

Если вы хотите использовать компонент без сохранения состояния, приведенный ниже код должен работать: 

import React from "react";

const SearchResults = props => {

    if (props.youtubeVids.length > 0) {
        var youtubeVidsMap = props.youtubeVids.map((video) => <div key={video.videoId}>
            <div className="video-title">
                <h2>{video.snippet.title} </h2>
            </div>
            <div>
                <img src={video.snippet.thumbnails.high.url} />
            </div>
            <div>
                <p>{video.snippet.description}</p>
            </div>
        </div>);

    }

    return (
    <div className="each-body-section video-container">
            {youtubeVidsMap}
    </div>
    )
}

export default SearchResults
...