Reactjs OnMouseCenter onMouseLeave错误：太多重新渲染

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

---

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

改变

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

到

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

尽管如此，如果您只想在悬停的任何元素上应用某种样式，那么使用CSS比您正在尝试的要好得多。悬停在组件上时，无需重新渲染组件，只需更新其样式即可

---

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

您需要在onMouseOver={=>{setHovertrue}这样的事件上触发函数但是使用你的技术，当一个链接处于悬停状态时，两个链接都会发生变化。我可以问一下，你为什么要使用JS而不是CSS来完成这项任务吗？当CSS出于性能和代码简单的原因成为首选时，我喜欢将所有内容放在一个地方，并且我只需要为少数项目设置样式，所以我不想创建CSS文件。您以前使用过样式化组件吗？他们让生活变得超级简单，代码超级可读，对性能没有影响，就像在纯JS中使用可能从未尝试过的方法一样，我会阅读文档，谢谢：用css重新制作，现在我看到它需要更少的代码。这是一个很好的答案，我会在回答OP问题时投票。我强烈建议OP使用CSS，尽管对于这项任务，它对许多人来说更有意义reasons@RedBaron我同意，我在回答中提到了这一点。谢谢。忘记函数调用了。

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