React/redux 工具包获取 api 问题——我正在尝试获取用户列表及其显示未定义答案

【问题标题】：React/redux toolkit fetchapi issue -- I am trying to get userlist and its showing undefinedReact/redux 工具包获取 api 问题——我正在尝试获取用户列表及其显示未定义
【发布时间】：2021-08-18 19:35:32
【问题描述】：

在下面的 react/redux 工具包应用程序中，在用户切片文件中，我试图导出我的实体状态并导入主文件，当我尝试控制台进入未定义时，不知道为什么它未定义，但是当我尝试将 {entities} 直接拉出状态时，它工作正常，想知道为什么它在控制台中显示未定义，如果有人知道请检查？

下面是我未定义的状态部分

export const { SelectUserList } = (state) => state.userslist.entities;

下面是显示 undefiend 的控制台

  console.log(SelectUserList);

我的切片文件在下面

import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";

export const fetchuserlist = createAsyncThunk(
  "userslist/fetchusers",
  async () => {
    const response = await fetch("https://jsonplaceholder.typicode.com/users");
    const users = await response.json();
    return users;
  }
);
const userSlice = createSlice({
  name: "userslist",
  initialState: {
    entities: [],
    loading: false,
  },
  reducers: {
    // userAdded(state, action) {
    //   state.entities.push(action.payload);
    // },
  },
  extraReducers: {
    [fetchuserlist.pending]: (state, action) => {
      state.loading = true;
    },
    [fetchuserlist.fulfilled]: (state, action) => {
      state.entities = [...state.entities, ...action.payload];
      state.loading = false;
    },
    [fetchuserlist.rejected]: (state, action) => {
      state.loading = false;
    },
  },
});

export const { userAdded, userUpdated, userDeleted } = userSlice.actions;
export const { SelectUserList } = (state) => state.userslist.entities;
export default userSlice.reducer;

我的组件文件在下面

import React from "react";
import { fetchuserlist, SelectUserList } from "./features/userSlice";
import { useDispatch, useSelector } from "react-redux";
const Mainlist = () => {
  const dispatch = useDispatch();
  const { entities } = useSelector((state) => state.users);
  console.log(SelectUserList);
  return (
    <div>
      <button onClick={() => dispatch(fetchuserlist())}>Load list</button>
      {entities?.map((s) => (
        <div className="user_list" key={s.id}>
          <h4>{s.id}</h4>
          <h6>{s.email}</h6>
          <button>delete</button>
          <button>edit</button>
        </div>
      ))}
    </div>
  );
};

export default Mainlist;

【问题讨论】：

标签： reactjs redux ecmascript-6 react-redux redux-toolkit

【解决方案1】：

在您的切片中，您以错误的方式声明了函数。您应该像这样声明 SelectUserList 函数：

export const SelectUserList = (state) => state.userslist.entities;

在您的组件文件中，您应该使用useSelector 访问在SelectUserList 中返回的实体。像这样：

const usersListEntities = useSelector(SelectUserList);

【讨论】：