Ох, тяжеловато ребят можете почему не работает?

Question

[newhacke]

не работают дочерние компоненты.

Выдается ошибка еypeError: Cannot read property 'map' of undefined

проверяю ничего не приходит в дочерние компоненты.

Почему ничего не приходит?

class Videomain extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            videos: [],
            selectedVideo: null,
        }

       this.onVideoSelect  = this.onVideoSelect .bind(this)
        this.addVal = this.addVal .bind(this)

        const token = localStorage.getItem("token")
        // eslint-disable-next-line no-unused-vars
        let login = true;
        if(token === null) {
            login = false
        }
        this.state = {
            login
        }
        console.log(login)
    }



    onVideoSelect = (video) => {
        this.setState({selectedVideo: video});
    }

    componentDidMount() {
        this.addVal('Start')
    }


    addVal = async (searchWord) => {
        const response = await j.get('name', {
            params: {
                part:'name'
            }
        });
        this.setState({videos: response.data.items, selectedVideo: response.data.items[0]})
    }

    render() {
        if (this.state.login === false) {
            return <Redirect to="/"/>
        }
        const {videos, selectedVideo} = this.state
        return (
            <div className="app" style={styleApp}>

                <Row justify="center">
                    <Col xs={20} sm={20}>
                        <Link to="/logout">" Выход</Link>
                        <Search onSubmit={this.addVal}/>
                    </Col>
                </Row>
                <Row justify="center">
                    <Col xs={24} sm={14}>
                        <Video video={selectedVideo}/>
                    </Col>
                    <Col xs={24} sm={6}>
                        <VideoItems videos={videos} onVideoSelect={this.onVideoSelect}/>
                    </Col>
                </Row>
            </div>
        );
    }
}

Comments

[Robur]

"Все работает" "но не работает" "все работает" "но не работает". Это все что можно понять из вашего описания проблемы.

[Pavel Kuzyakin]

так в дочернем компоненте проблема, тут у вас map в коде нет

[Роман Александрович]

class Videomain extends React.Component {
 state = {
            videos: [],
            selectedVideo: null,
        }
    onVideoSelect = (video) => {
        this.setState({selectedVideo: video});
    }

    async componentDidMount() { 
        this.addVal('Start')

       const token =  await localStorage.getItem("token") //тут нужно подождать выполнения async await 

        let login = true;
        if(token === null) {
            login = false
        }
        this.state = {
            login
        }
    }


    addVal = async (searchWord) => {
        const response = await connect.get('connect', {
            params: {
                part: 'snippet',
            }
        });
        this.setState({videos: response.data.items, selectedVideo: response.data.items[0]})
    }

    render() {
        if (this.state.login === false) {
            return <Redirect to="/"/>
        }
        const {videos, selectedVideo} = this.state
        return (
            <div className="app" style={styleApp}>

                <Row justify="center">
                    <Col xs={20} sm={20}>
                        <Link to="/logout">" Выход</Link>
                        <Search onSubmit={this.addVal}/>
                    </Col>
                </Row>
                <Row justify="center">
                    <Col xs={24} sm={14}>
                        <Video video={selectedVideo}/>
                    </Col>
                    <Col xs={24} sm={6}>
                        <VideoItems videos={videos} onVideoSelect={this.onVideoSelect}/>
                    </Col>
                </Row>
            </div>
        );
    }
}

[Ihor Bratukh]

Роман Александрович, с каких пор localStorage стал асинхронным?
await localStorage.getItem

[Роман Александрович]

Ihor Bratukh, я из реакт натива. подумал что тут он тоже асинхронный

Answer 1

[Пес Барбос]

Добавьте код компонентов, в которых вызывается map. Данная ошибка вылетает если в компоненте нет проверки пропса, является ли он массивом. Те при рендере туда передаётся значение null или undefined и компонент пытается вызвать у него свойство map,но у null нет такой функции.

Answer 2

[no-taktik]

Попробуй убрать второй this.state =... из конструктора. Ты же переопределяешь state, там больше нет videos, значит оно undefined

Такое ощущение, что код скопирован с другого компонента (=