在 React 中使用 Fetch api 从 createContext 中的 api 获取数据不起作用

Question

我有一个现有的 context 产品。最初我使用如下所示的一些模拟数据 STORE_DATA 来渲染组件。现在我需要替换那个模拟数据并连接到 Node.js api，它在我的 local port 上可用（在我创建 react-app 之后创建了 api ).

import React, { createContext, useState } from 'react';
import STORE_DATA from '../shop';

export const ProductsContext = createContext();

const ProductsContextProvider = ({ children }) => {
const [products] = useState(STORE_DATA);

return (
  <ProductsContext.Provider value={{ products }}>
    {
      children
    }
  </ProductsContext.Provider>
 );
}

export default ProductsContextProvider;

刚刚创建了一个 helper.js 文件，下面是用来获取数据的文件：

 import {useEffect} from "react";


const fetchData = () => {
    return fetch("https://localhost:8081/products") <<tested on postman and works fine.
          .then((response) => response.json())
          .then((data) => console.log('Fetching Data:',data));
}

如何替换 context 文件中的模拟数据并在 context 中使用 useEffect 使用此 fetchData()？应该更改什么代码？

尝试了以下方法，但没有用，甚至无法打印 console.log:

import React, { createContext, useState, useEffect } from 'react';
import { fetchData } from '../helpers';

export const ProductsContext = createContext();

const ProductsContextProvider = ({ children }) => {
  const [products, setProducts] = useState(null);

  useEffect(() => {
    setProducts(fetchData());
    }, []);

  return (
    <ProductsContext.Provider value={{ products }}>
      {
        children
      }
    </ProductsContext.Provider>
  );
}

export default ProductsContextProvider;

Answer 1

问题是它返回了以下错误 (explained)：

net::ERR_SSL_PROTOCOL_ERROR (on chrome)

解决方案：在以下代码中的 URL 中使用 http:// 而不是 https://：

const fetchData = () => {
    return fetch("http://localhost:8081/products") 
          .then((response) => response.json())
          .then((data) => console.log('Fetching Data:',data));
}

在 React 中使用 Fetch api 从 createContext 中的 api 获取数据不起作用

Fetch data from api in createContext using Fetch api in React doesn't work

reactjs

fetch-api

react-context