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

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={() => {setHover(true}} sandbox here 这样的事件上触发功能，但是使用您的技术，当一个悬停时，您将同时更改链接

Answer 2

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

改变

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

到

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

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

虽然，如果您只是想在hover 上的任何元素上应用一些样式，那么使用 CSS 做这件事要比您尝试做的要好得多。无需重新渲染组件，当它被悬停时，只需更新其样式。

另外请记住，由于当hover 为真时您将样式应用于两个Link 组件，如果您将鼠标悬停在Link 组件之一上，它会将hover 设置为true 并且两个@ 987654334@ 组件将被设置样式。