您可能违反了 Hooks-Error 规则：无效的钩子调用。 Hooks 只能在函数组件内部调用

Question

我已经通过npm ls react-dom和npm ls react检查过react和react-dom版本，它们是相同的。 我还检查了另一个反应，但我只有 1 个。

索引.js

    import React from "react";
    import { Provider } from "react-redux";
    import ReactDOM from "react-dom";
    import "./index.css";
    import App from "./App";
    import reportWebVitals from "./reportWebVitals";
    import store from "./store";

    ReactDOM.render(
      <Provider store={store}>
       <React.StrictMode>
         <App />
        </React.StrictMode>
      </Provider>,
      document.getElementById("root")
    );

    // If you want to start measuring performance in your app, pass a function
    // to log results (for example: reportWebVitals(console.log))
    

商店.js

  import { createStore } from "redux";
  import data from "./data";

  const initialState = {};
  const reducer = (state, action) => {
      return { products: data.products };
      };
  const store = createStore(reducer, initialState);
  export default store;

应用程序.js

    import React from "react";
    import { BrowserRouter, Route } from "react-router-dom";
    import HomeScreen from "./Screens/HomeScreen";
    import ProductScreen from "./Screens/ProductScreen";

    function App() {
      return (
        <BrowserRouter>
          <div className="grid-container">
            <header className="row">
              <div>
                <a className="brand" href="/">
                  amazona
                </a>
              </div>
              <div>
                <a href="/cart">Cart</a>
                <a href="/signin">Sign In</a>
              </div>
            </header>
            <main>
              <Route path="/product/:id" component= 
       {ProductScreen}></Route>
      <Route path="/" component={HomeScreen} exact></Route>
    </main>
    <footer className="row center"> All right reserved</footer>
  </div>
</BrowserRouter>
      );
    }

    export default App;

主屏幕.js

    import React, { useEffect, useState } from "react";
    import axios from "axios";

    import Product from "../components/Product";
    import LoadingBox from "../components/LoadingBox";
    import MessageBox from "../components/MessageBox";



      function HomeScreen(props) {
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(false);
  useEffect(() => {
    const fetchData = async () => {
      try {
        setLoading(true);
        const { data } = await axios.get("/api/products");
        setLoading(false);
        setProducts(data);
      } catch (err) {
        setError(err.message);
        setLoading(false);
      }
    };
    fetchData();
  }, []);
  return (
    <div>
      {loading ? (
        <LoadingBox></LoadingBox>
      ) : error ? (
        <MessageBox variant="danger">{error}</MessageBox>
      ) : (
        <div className="row center">
          {products.map((product) => (
            <Product key={product._id} product={product}></Product>
          ))}
        </div>
      )}
    </div>
  );
}

export default HomeScreen;

ProductScreen.js

 import React from "react";
import { Link } from "react-router-dom";

import data from "../data";
import Rating from "../components/Rating";

function ProductScreen(props) {
  const product = data.products.find((x) => x._id === props.match.params.id);
  if (!product) {
    return <div>Product Not Found</div>;
  }

  return (
    <div>
      <Link to="/">Back To Results</Link>
      <div className="row top">
        <div className=" col-2">
          <img className="large" src={product.image} alt={product.name}></img>
        </div>
        <div className="col-1">
          <ul>
            <li>
              <h1>{product.name}</h1>
            </li>
            <li>
              <Rating
                rating={product.rating}
                numReviews={product.numReviews}
              ></Rating>
            </li>
            <li>Price: KSh{product.price}</li>
            <li>
              Description:
              <p>{product.description}</p>
            </li>
          </ul>
        </div>
        <div className="col-1">
          <div className="card card-body">
            <ul>
              <li>
                <div className="row">
                  <div>Price</div>
                  <div className="price">KSh{product.price}</div>
                </div>
              </li>
              <li>
                <div className="row">
                  <div>Status</div>
                  <div>
                    {product.countInStock > 0 ? (
                      <span className="success">In Stock</span>
                    ) : (
                      <span className="danger">Unavailable</span>
                    )}
                  </div>
                </div>
              </li>
              <li>
                <button className="primary block">Add to Cart</button>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  );
}

export default ProductScreen;

错误

错误：无效的挂钩调用。 钩子只能在函数组件的主体内部调用。 这可能是由于以下原因之一造成的：

1. 你可能有不匹配的 React 版本和渲染器（例如 React DOM）
2. 你可能会违反 Hooks 规则
3. 您可能在同一个应用程序中拥有多个 React 副本，请参阅https://reactjs.org/link/invalid-hook-call以获取有关如何调试和修复此问题的提示。

index.js 第 9 行

   6 | import reportWebVitals from "./reportWebVitals";
   7 | import store from "./store";
   8 | 
>  9 | ReactDOM.render(
  10 |   <Provider store={store}>
  11 |     <React.StrictMode>
  12 |       <App />

Answer 1

钩子规则指定钩子调用永远不能在条件下完成。

在您的代码中，您在 try/catch 中调用钩子，这意味着它们不会全部运行，从而打破了钩子需要始终以相同顺序调用的事实。

在此处查看更多信息