您可能违反了挂钩规则错误:无效的挂钩调用.钩子只能在函数组件的主体内部调用

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))

store.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;

App.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. 你可能违反了胡克规则
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中调用钩子，这意味着它们不会全部运行，从而打破了钩子需要始终以相同顺序调用的事实。

点击此处查看更多信息