未处理的拒绝（TypeError）：无法在已撤销的代理上执行“获取”答案

【问题标题】：Unhandled Rejection (TypeError): Cannot perform 'get' on a proxy that has been revoked未处理的拒绝（TypeError）：无法在已撤销的代理上执行“获取”
【发布时间】：2021-09-05 15:43:14
【问题描述】：

我正在学习使用@reduxjs 工具包学习redux，并希望能够列出来自http://universities.hipolabs.com/search?country=Turkey 的大学列表。在尝试从链接映射大学并将彼此推送到“大学”initialState 时，我收到一条错误消息：

“未处理的拒绝（TypeError）：无法在已撤销的代理上执行'get'”

我做错了什么？

大学服务：

import axios from "axios";

export default class UniversityService {
  getUniversitiesByCountry(countryName) {
    return axios
      .get("http://universities.hipolabs.com/search? country=" + countryName)
      .then((response) => response);
  }
}

大学片：

import { createSlice } from "@reduxjs/toolkit";
import UniversityService from "../../service/UniversityService";

const universityService = new UniversityService();

export const universitiesSlice = createSlice({
  name: "universities",
  initialState: {
    universities: [],
  },
  reducers: {
    setUniversitiesByCountryName: (state, action) => {
      universityService
        .getUniversitiesByCountry(action.payload)
        .then((response) => response.data.map(
          (university) => state.universities.push(university)
        ));
    },
  },
});

export const { setUniversitiesByCountryName } = universitiesSlice.actions;
export default universitiesSlice.reducer;

ListPage.js

export default function ListPage() {
  const dispatch = useDispatch();
  dispatch(setUniversitiesByCountryName("Turkey"));

  const universities = useSelector((state) => state.universities.universities);

  console.log(universities);

  return (
    <div>
      <Table striped bordered hover>
        <thead>
          <tr>
            <th>#</th>
            <th>University Name</th>
            <th>Domain</th>
            <th>Web Page</th>
          </tr>
        </thead>
        <tbody>
          {universities.map((university) => (
            <tr key={university.index}>
              <td>{universities.indexOf(university) + 1}</td>
              <td>{university.name}</td>
              <td>{university.domains[0]}</td>
              <td>
                <a style={{ textDecoration: "none" }} href={university.web_pages[0]} target="_blank">
                  {university.web_pages[0]}
                </a>
              </td>
            </tr>
          ))}
        </tbody>
      </Table>
    </div>
  );
}

【问题讨论】：

标签： reactjs redux

【解决方案1】：

您正在尝试在 reducer 中运行异步逻辑，并且 that is never allowed in Redux - reducers must not have side effects。

异步逻辑必须在reducer之外，例如在“thunk”函数中：

【讨论】：