Question

我收到错误：TypeError: Cannot read property 'map' of undefined。我理解这与数组有关（posts）映射是空的：

const postsList = posts.map((postList, i) => {

我的行动如下：

const setPosts = data => {
  return {
    type: 'SET_POSTS',
    payload: {
      setPosts: data
    }
  }
}

export const fetchPosts = () => async dispatch => {
  try {
    const posts = await axios.get(`${settings.hostname}/api/posts`)
    dispatch(setPosts(posts.data))
  } catch (err) {
    throw err
  }
}

我的减速机：

const initialState = {}

export const fetchPosts = (state = initialState, action) => {
  switch (action.type) {
    case 'SET_POSTS':
      return { ...state, posts: action.payload.setPosts }

    default:
      return state
  }
}

在我的组件中（最重要的东西）：

componentDidMount() {
  this.props.fetchPosts()
}

PostLayout.propTypes = {
  props: PropTypes.object.isRequired,
  fetchPosts: PropTypes.func.isRequired
}

const mapStateToProps = state => {
  return {
    posts: state.fetchPosts.posts,
    isLoading: state.fetchPostsIsLoading
  }
}

const mapDispatchToProps = dispatch => {
  return {
    fetchPosts: () => dispatch(fetchPosts())
  }
}

奇怪的部分是我可以在这里看到它：

const posts = this.props.posts || []
console.log(posts)

首先是一个空数组，但后来它被数据填充。所以我想知道如何解决这个令人沮丧的错误，以便我可以映射我的数据。

感谢阅读！

Answer 1

你的组件可能在AJAX fetch在其初始渲染完成之前调用postsList.map（很难说，因为你没有向我们展示组件）。组件在安装时呈现，它们不希望完成调度。只需做一些像

这样的事情

if( !postList || this.props.isLoading ) {
    return <div>loading</div>;
}

Answer 2

据我所知，这与数组（posts）映射有关空：

它不是空的。这是未定义的。

只需将初始状态中的posts设置为空数组：）

const initialState = {
  posts: [],
}

通过这种方式，您将避免错误，并且不必进行额外的检查。

TypeError：无法读取undefined |的属性“map” React，Redux

2 个答案: