不响应路由以更正页面，也不获取api

Question

我有一个简单的react应用程序，它只有一个主页，它显示使用fetch- app获取的数据。但是它不能工作，下面是它在我放置时显示的index.js，而不是

import React from 'react';
import ReactDOM from 'react-dom';
import './styles.css';
import Routess from './Routess'
import Home from './core/Home'


var app = document.getElementById("root");
ReactDOM.render(<Routess />, app);

这是Routess.js

import React from "react"
import {BrowserRouter,Switch,Route} from "react-router-dom";
import Home from "./core/Home";
const Routess = () => {
return (
       <BrowserRouter>
          <Switch>
             <Route path="/" exact component={Home}/>
          </Switch>
       </BrowserRouter>
    );
 };

export default Routess;

我已经检查过它，使用导入路由代替开关，使用元素代替组件，但它不起作用

从api coreapicall.js获取的代码

import {API} from "../../backend";
import axios from "axios"


export const getProducts = () => {
return  fetch(`${API}product`,{method:"GET"})
    .then((response) => {
      return response.json();
    })
    .catch((err) => console.log(err))
 };

Home.js

import React, {useState, useEffect} from 'react'
import {getProducts} from "./helper/coreapicalls"


export default function Home() {

const {products, setProducts} = useState([]);
const [error, setError] = useState(false);

const loadAllProducts = () => {
    getProducts()
     .then((data) => {
        if (data.error){
            setError(data.error)
            console.log(error)
        } else {
            setProducts(data);
        }
     });
    
  };

  useEffect(() => {
    loadAllProducts();
  }, []);

   return (
      <div>
          <h1>Home Component </h1>
          <div className="row">
            {products.map((product, index) => {
                return(
                  <div key={index}>
                     <h1>{product.name}</h1>
                  </div>
                );
            })}
          </div> 
      </div>
        );
      }

package.json

{
  "name": "react-5",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
     "axios": "^0.21.4",
     "bootstrap": "^5.1.0",
     "braintree-web-drop-in-react": "^1.2.1",
     "query-string": "^7.1.0",
     "react": "^16.13.1",
     "react-bootstrap": "^2.0.0-beta.6",
     "react-dom": "^16.13.1",
     "react-router-dom": "^5.3.0",
     "react-scripts": "3.4.1"
   },
  "scripts": {
     "start": "react-scripts start",
    "build": "react-scripts build",
     "test": "react-scripts test",
    "eject": "react-scripts eject"
    },
  "eslintConfig": {
      "extends": "react-app"
   },
   "browserslist": {
     "production": [
     ">0.2%",
      "not dead",
     "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
  "last 1 firefox version",
  "last 1 safari version"
   ]
   }
  }

Answer 1

你在这条线路上弄错了

const {products, setProducts} = useState([]);

这应该是：

const [products, setProducts] = useState([]);

您的setProducts没有正常工作。