Question

我正在关注Redux教程，但是一段时间以来我一直被这个错误困扰。

我曾尝试从遭受类似问题的人那里查找并使用StackOverflow上的策略，但没有一个起作用。我尝试调整自己的index.js和App.js中的代码，以更好地定位“艺术家”。我还仔细检查了语法，以确保正确定位所有内容，但没有任何效果。

有人可以帮助我了解此错误的出处以及如何解决？

如果有帮助，下面列出了我正在关注的教程的链接。步骤8是我特别坚持的部分。 https://www.youtube.com/watch?v=DiLVAXlVYR0&t=3s

此外，如果下面的代码不足以解释问题，这是我的GitHub Repo： 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

简而言之，在从render检索任何数据之前，一次都要使用React-components 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);

另一种方法是，如果只想使用该功能，则使用implicit return，

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..."
    }
}

我该如何解决：“ TypeError：无法读取未定义的属性'map'”

2 个答案: