Question

我正在尝试更改用户数组中的状态。我正在尝试将状态更新为“是”。如何在不更改状态的情况下访问其数据？

请参见此代码和框链接

const dispatch = useDispatch();
  const isLoading = useSelector(state => state.user.isLoading);
  const users = useSelector(state => state.user.users);

  const onApprove = user => {
    dispatch(approveUser(user));
  };

  useEffect(() => {
    dispatch(getUsers());
  }, [dispatch]);

Answer 1

要更改reducer中的状态而不进行突变，请尝试以下操作：

    case 'YOUR_ACTION':
        return {
            ...state,
            users: state.users.map((user) =>
                user.id === action.userId
                    ? {
                          ...user,
                          status: 'yes', // or you could action.status
                      }
                    : user,
            ),
        }

我正在所有users上进行映射，然后将user.id与该操作发送过来的那个进行匹配，并将其状态更改为yes。如果不匹配，我们只需返回user

Answer 2

更新approveUser操作以通过并通过user

export function approveUser(user) { // <-- receive user object
  return dispatch => {
    dispatch({
      type: userConstants.APPROVE_USER_REQUEST
    });
    dispatch({
      type: userConstants.APPROVE_USER_SUCCESS,
      payload: {
        approved: "HAHAHHA"
      },
      user, // <-- pass user object
    });
    dispatch({
      type: userConstants.APPROVE_USER_FAILURE,
      payload: {}
    });
  };
}

然后更新化简器以传播更新。使用收到的user对象映射新的“是”状态。

case userConstants.APPROVE_USER_SUCCESS:
  return {
    ...state,
    isLoading: false,
    users: state.users.map(user => user.id === action.user.id ? {
      ...user,
      status: 'yes',
    } : user)
  };

使用Redux在React中更新数组中的嵌套对象

2 个答案: