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

Posted 2023-02-22

【中文标题】onMouseEnter onMouseLeave 错误：太多的重新渲染反应[重复]

【英文标题】：onMouseEnter onMouseLeave Error: Too many re-renders react [duplicate]

【发布时间】：2020-09-29 11:52:17

【问题描述】：

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

【问题讨论】：

我能问一下你为什么要使用 JS 而不是 CSS 来完成这项任务吗？出于性能原因和代码简单性，何时 CSS 将成为首选选项

我喜欢一个地方，我只需要为少数项目制作样式，所以我不想创建css文件。

你以前用过styled-components吗？它们让生活变得超级简单，代码超级易读，并且不会像在纯 JS 中那样对性能产生影响

从未尝试过，我会阅读文档，谢谢:)

用 css 重新制作，现在我发现它需要更少的代码。

【参考方案1】：

您需要在 onMouseOver=() => setHover(true sandbox here 这样的事件上触发功能，但是使用您的技术，当一个悬停时，您将同时更改链接

【参考方案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@ 组件将被设置样式。

【讨论】：

这是一个很好的答案，我会在它回答 OP 问题时投赞成票。我强烈建议 OP 使用 CSS，尽管出于多种原因，这项任务更有意义

@RedBaron 我同意，我在回答中提到了这一点。

感谢成功。忘记函数调用了。