Как я решаю: «TypeError: Невозможно прочитать свойство 'map' of undefined"

Question

Я следую учебнику по Redux, но я застрял на этой ошибке некоторое время.

Я пытался найти и использовать тактику в StackOverflow от людей, которые столкнулись с подобной проблемой, но ни один из них не помог.Я попытался настроить свой код в моих index.js и App.js, чтобы лучше нацелиться на "исполнителя".Я также дважды проверил свой синтаксис, чтобы убедиться, что все правильно нацелено, но ничего не работает.

Может кто-нибудь помочь мне понять, откуда эта ошибка и как я могу ее исправить?

Если это поможет, ссылка на учебник, по которому я иду, приведена ниже.Шаг 8 - это та часть, на которой я застрял.https://www.youtube.com/watch?v=DiLVAXlVYR0&t=3s

Кроме того, вот мой репозиторий на GitHub, если приведенного ниже кода недостаточно для объяснения проблемы: https://github.com/adimacci95/K-Profiles

Artist-List.js

import React, { Component } from 'react';
// import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

class artistList extends Component {

    createArtistList() {
        return this.props.artist.map((artist) => {
            return (
                <div className="card" key={artist.id}>
                    Hello
                    <div className="card-image"> 
                        <img src={artist.img} alt={artist.stagename}/>
                    </div>
                </div>
            );
        });
    }

    render() {
        return (
            <div className="container">
                {this.createArtistList()}
            </div>
        );
    }
}

function mapStateToProps(state) {
    return {
        artist: state.artist
    };
}

export default connect(mapStateToProps)(artistList);

App.js

import React from 'react';
import Navbar from './components/Navbar/navbar.js';
import {BrowserRouter, Route, Switch} from 'react-router-dom'
import artistList from './pages/ArtistList/artist-list.js';

const App = () => (
    <div className="App">
      <BrowserRouter>
        <Navbar/>
          <Switch>
            <Route path="/artists" component={artistList}/>
          </Switch>
      </BrowserRouter>
    </div>
);

export default App;

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import { BrowserRouter } from 'react-router-dom';
import allArtists from './reducers/reducers.js';

const store = createStore(allArtists);

ReactDOM.render(
    <Provider store={store}>
        <BrowserRouter>
            <App />
        </BrowserRouter>
    </Provider>,
document.getElementById('root'));

Answer 1

Короче говоря, React-компоненты render один раз перед извлечением любых данных из redux-store/mapStateToProps.

В настоящее время вы выполняете .map() над массивом, который еще не существует. то есть: от реквизита еще не было данных.

В createArtistList() вы должны проверить, есть ли на самом деле данные, перед вызовом .map(). Просто запустите проверку как:

createArtistList() {
    const artists = this.props.artist
    if(artists && artists.length > 0){
        return artists.map((artist) => {
              return (
                 <div className="card" key={artist.id}>
                    Hello
                    <div className="card-image"> 
                       <img src={artist.img} alt={artist.stagename}/>
                    </div>
                 </div>
             );
           }
    } else {
        return "Loading..."
    }
}

Answer 2

Самое простое решение - написать вашу map функцию внутри render,

import React, { Component } from 'react';
// import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

class artistList extends Component {
    render() {
        return (
            <div className="container">
                {this.props.artist.length > 0 && this.props.artist.map((artist) => (
                    <div className="card" key={artist.id}>
                        Hello
                        <div className="card-image"> 
                            <img src={artist.img} alt={artist.stagename}/>
                        </div>
                    </div>
                    );
                )}
            </div>
        );
    }
}

function mapStateToProps(state) {
    return {
        artist: state.artist
    };
}

export default connect(mapStateToProps)(artistList);

Другой способ, если вы хотите использовать только функцию, тогда используйте неявный возврат ,

createArtistList() {
    if(this.props.artist.length > 0){
        return this.props.artist.map((artist) => (
                 <div className="card" key={artist.id}>
                    Hello
                    <div className="card-image"> 
                       <img src={artist.img} alt={artist.stagename}/>
                    </div>
                 </div>
             );
           )
    } else {
        return "Loading..."
    }
}