React-Redux Reducer - 添加到数组的第一个元素未定义答案

【问题标题】：React-Redux Reducer - First element added to an array is undefinedReact-Redux Reducer - 添加到数组的第一个元素未定义
【发布时间】：2021-02-23 21:18:55
【问题描述】：

我有一个 redux reducer，由于某种原因，我添加到 state 中的数组的第一个值被设置为 undefined。这是“USERS_DATA_STATE_CHANGE”的情况。这是reducer的代码；

import { CLEAR_DATA, USERS_DATA_STATE_CHANGE, USERS_POSTS_STATE_CHANGE } from "../constants";

const initialState = {
    users: [],
    usersLoaded: 0
};

export const users = function (state = initialState, action)
{
    switch (action.type)
    {
        case USERS_DATA_STATE_CHANGE: 
            console.log(action.user);
            return {...state, users: [...state.users, action.user]}

        case USERS_POSTS_STATE_CHANGE:
            return {...state, usersLoaded: state.usersLoaded + 1, users: state.users.map(function (user) {user.uid === action.uid ? {...user, posts: action.posts} : user})}

        case CLEAR_DATA:
            return initialState;

        default:
            return state;
    }
}

这是每个用户在更改状态之前登录时的数据；

这就是这 3 次添加后数组的样子；

根本无法弄清楚为什么会发生这种情况，因此我们将不胜感激，干杯。

【问题讨论】：

标签： react-native redux react-redux

【解决方案1】：

问题实际上发生在您的USERS_POSTS_STATE_CHANGE 中。 state.users.map 中的回调函数不返回任何内容，因此它将数组中的所有用户替换为 undefined。

arrow function 是隐含的返回，因此您可以这样做：

users: state.users.map(user =>
  user.uid === action.uid ? { ...user, posts: action.posts } : user
)

使用function(user){}，您需要return 关键字：

users: state.users.map(function (user) {
  return user.uid === action.uid ? { ...user, posts: action.posts } : user;
})

【讨论】：

感谢现在工作得很好。完全忘记了箭头函数有隐含的返回。