Question

我正在尝试实施我的第一个React-Redux应用程序并从TypeError: Cannot read property 'map' of undefined获得bundle.js。我猜它与jokes数组相关联，并且它与我的React jokeList组件道具的错误集成：

import React from 'react';
import {connect} from 'react-redux';

class ListOfJokes extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    const {jokes} = this.props;
    return (
      <ul>
        {jokes.map(joke => (<li>joke</li>))}
      </ul>
    )
  } 
}

const mapStateToProps = state => ({
  jokes: state.jokes
})

export default connect(mapStateToProps, null)(ListOfJokes);

它实际上有什么问题？

Answer 1

您确定store.jokes总是包含某些内容吗？如果异步获取数据，则第一次渲染store.jokes可能为undefined。如果是这样的话，那就做：

const mapStateToProps = state => ({
  jokes: state.jokes || []
})

Answer 2

使用条件循环检查是否有笑话。当设置笑话然后它将映射。

{jokes.length !== 0 ?
   jokes.map(joke => (<li>joke</li>)) : (<li>no jokes</li>)
}

与React道具的错误集成

2 个答案: