错误：太多的重新渲染反应[重复]

Question

所以这是我的第一个组件，我减速我的路线。我决定做两个导航项目。做了一些造型。但我得到的错误，许多重新渲染。因为我尝试添加带有悬停效果的样式。我不想使用css。这是我的代码：

import React, { useState } from 'react';
import { BrowserRouter, Route, Switch, Link } from 'react-router-dom';
import logo from './logo.svg';
import './App.css';
import Products from './Screens/ProductsList';
import Preview from './Screens/Product';
import ProductCreate from './Screens/ProductCreate';
import ProductEdit from './Screens/ProductEdit';
import Home from './Screens/Home';

function App() {
  const [hover, setHover] = useState(false);
  return (
    <BrowserRouter>
      <div style={style.navigationContainer}>
        <Link
          onMouseEnter={setHover(true)}
          onMouseLeave={setHover(false)}
          style={hover ? style.hoverNavItem : style.navItem}
          to="/products"
        >
          Products List
        </Link>
        <Link
          onMouseEnter={setHover(true)}
          onMouseLeave={setHover(false)}
          style={hover ? style.hoverNavItem : style.navItem}
          to="/products/create"
        >
          Create Product
        </Link>
      </div>

      <Switch>
        <Route
          key="edit-product"
          path="/products/:id/edit"
          component={ProductEdit}
        ></Route>
        <Route
          key="add-product"
          path="/products/create"
          component={ProductCreate}
        ></Route>
        <Route key="preview" path="/products/:id" component={Preview}></Route>
        <Route key="products" path="/products" component={Products}></Route>
        <Route exact path="/" component={Home}></Route>
      </Switch>
    </BrowserRouter>
  );
}

export default App;

Answer 1

您需要在类似以下事件的情况下触发函数：onMouseOver={（）=

Answer 2

您需要向onMouseEnter和onMouseLeave传递一个函数，该函数将在触发这些事件时调用setHover函数

改变

onMouseEnter={setHover(true)}
onMouseLeave={setHover(false)}

到

onMouseEnter={() => setHover(true)}
onMouseLeave={() => setHover(false)}

执行onmouseinter={setHover（true）}将立即调用setHover函数并更新状态，而不是等待onmouseinter事件。因此，您的代码陷入了更新状态和重新渲染的无限循环中

虽然，如果您只是想在悬停上的任何元素上应用一些样式，那么使用CSS比您试图做的要好得多。当组件悬停在上面时，不需要重新渲染组件，只是为了更新它的样式。

还请记住，由于当悬停为true时，您正在将样式应用于两个链接组件，因此如果您将鼠标悬停在其中一个链接组件上，它会将悬停设置为true，并且两个链接组件都将被设置样式。