TypeError：无法在 react.js 中的 isURLSameOrigin (isURLSameOrigin.js:57:1) 处读取未定义的属性（读取“协议”）

Question

我试图用这种方法从数据库中获取产品，我在控制台中打印了所有 4 个日志 1.调用 try 块 2.调用 axios ... 4.请求已解决，但来自 db 的产品未显示在屏幕。

const Products = ({ category, filters, sort }) => {
  const [products, setProducts] = useState([]);
  const [filteredProducts, setFilteredProducts] = useState([]);

  useEffect(() => {
    const getProducts = async () => {
      console.log("calling the try block");
      try {
        console.log("calling axios");
        const res = await axios.post(
          console.log("request for getting data recieved"),
          category
            ? `http://localhost:5000/api/products/?category=${category}`
            : "http://localhost:5000/api/products/",
          console.log("request resolved")
        );
        setProducts(res.data);
      } catch (err) {
        console.log(err)
      }
    };
    getProducts();
  }, [category]);



useEffect(() => {
    category &&
      setFilteredProducts(
        products.filter((item) =>
          Object.entries(filters).every(([key, value]) =>
            item[key].includes(value)
          )
        )
      );
  }, [products, category, filters]);

  return (
    <Container>
      {filteredProducts.map((item) => (
        <Product item={item} key={item.id} />
      ))}
    </Container>
  );
};

在我已经提到的 4 个日志之后，我只能看到（在控制台中）而不是结果

TypeError: Cannot read properties of undefined (reading 'protocol')
    at isURLSameOrigin (isURLSameOrigin.js:57:1)
    at dispatchXhrRequest (xhr.js:147:1)
    at new Promise (<anonymous>)
    at xhrAdapter (xhr.js:16:1)
    at dispatchRequest (dispatchRequest.js:58:1)
    at Axios.request (Axios.js:109:1)
    at Axios.httpMethod [as post] (Axios.js:144:1)
    at Function.wrap [as post] (bind.js:9:1)
    at getProducts (Products.jsx:23:1)
    at Products.jsx:35:1
    at invokePassiveEffectCreate (react-dom.development.js:23487:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
    at invokeGuardedCallback (react-dom.development.js:4056:1)
    at flushPassiveEffectsImpl (react-dom.development.js:23574:1)
    at unstable_runWithPriority (scheduler.development.js:468:1)
    at runWithPriority$1 (react-dom.development.js:11276:1)
    at flushPassiveEffects (react-dom.development.js:23447:1)
    at react-dom.development.js:23324:1
    at workLoop (scheduler.development.js:417:1)
    at flushWork (scheduler.development.js:390:1)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:157:1)

我实际上是第一次使用 axios 并卡在这里，请帮助

我的控制台上还打印了以下错误，

index.js:1 Warning: Failed prop type: Material-UI: `overlap="rectangle"` was deprecated. Use `overlap="rectangular"` instead.
    at Badge (http://localhost:3000/static/js/vendors~main.chunk.js:4895:35)
    at WithStyles (http://localhost:3000/static/js/vendors~main.chunk.js:181340:31)
    at div
    at O (http://localhost:3000/static/js/vendors~main.chunk.js:345603:6)
    at div
    at O (http://localhost:3000/static/js/vendors~main.chunk.js:345603:6)
    at div
    at O (http://localhost:3000/static/js/vendors~main.chunk.js:345603:6)
    at div
    at O (http://localhost:3000/static/js/vendors~main.chunk.js:345603:6)
    at Navbar
    at div
    at O (http://localhost:3000/static/js/vendors~main.chunk.js:345603:6)
    at ProductList (http://localhost:3000/static/js/main.chunk.js:4146:88)
    at Routes (http://localhost:3000/static/js/vendors~main.chunk.js:336653:5)
    at Router (http://localhost:3000/static/js/vendors~main.chunk.js:336586:15)
    at BrowserRouter (http://localhost:3000/static/js/vendors~main.chunk.js:335393:5)
    at App

这可能是这个问题的任何原因吗？

我收到以下问题

控制台错误截图

Answer 1

您不能将 console.log 作为 axios.post 调用的第一个参数和最后一个参数。 参考https://axios-http.com/docs/post_example

理想情况下，您还应该在 axios 调用之前构建您的请求 URL。

const url = category
  ? `http://localhost:5000/api/products/?category=${category}`
  : "http://localhost:5000/api/products/";
const res = await axios.post(url);