如何在使用 Hooks 的 React 中防止无限循环

Question

我正在处理一个 React 项目，因为我有两个按钮，我将状态和功能应用于两个按钮，但它显示这样的错误。 请帮我解决这个问题。 它显示这样的错误 Error: Too many re-renders。 React 限制渲染次数以防止无限循环。

这是我的代码 App.js

import React, { useState } from "react";
import { Button } from "antd"
import 'antd/dist/antd.css';
import "./App.css";

const App = () => {
  const [buttonOne, setButtonOne] = useState({
    backgroundColor: "#b5e5f6",
    color: "black",
    border: "#b5e5f6"
  })

  const buttonOneFun = () => {
    setButtonOne({
      backgroundColor: "#eaeaea",
    color: "black",
    border: "#eaeaea"
    })
  }

  const [buttonTwo, setButtonTwo] = useState({
    backgroundColor: "#eaeaea",
    color: "black",
    border: "#eaeaea"
  })

  const buttonTwoFun = () => {
    setButtonTwo({
      backgroundColor: "#b5e5f6",
      color: "black",
      border: "#b5e5f6"
    })
  }

  return (
    <div>
      <Button style={{backgroundColor: buttonOne.backgroundColor, border: buttonOne.border, color: buttonOne.color}} className="one" type="primary">First</Button>
      <Button onClick={() => buttonTwoFun(), buttonOneFun()} style={{backgroundColor: buttonTwo.backgroundColor, color: buttonTwo.color, border: buttonTwo.border}} className="two" type="primary">Second</Button>
    </div>
  )
}

export default App

Answer 1

如果您将这两个函数包装在一个{} ，您将不会再看到此错误，但我建议您只在onClick使用一个函数并在此函数中设置您的两个states 。

import React, { useState } from "react";
import { Button } from "antd"
import 'antd/dist/antd.css';
import "./App.css";

const App = () => {
  const [buttonOne, setButtonOne] = useState({
    backgroundColor: "#b5e5f6",
    color: "black",
    border: "#b5e5f6"
  })

 const [buttonTwo, setButtonTwo] = useState({
    backgroundColor: "#eaeaea",
    color: "black",
    border: "#eaeaea"
  })

  const buttonOneAndTwoFun = () => {
    setButtonOne({
      backgroundColor: "#eaeaea",
    color: "black",
    border: "#eaeaea"
    });
   setButtonTwo({
      backgroundColor: "#b5e5f6",
      color: "black",
      border: "#b5e5f6"
    })
  }

   
 

  return (
    <div>
      <Button style={{backgroundColor: buttonOne.backgroundColor, border: buttonOne.border, color: buttonOne.color}} className="one" type="primary">First</Button>
      <Button onClick={() => buttonOneAndTwoFun()} style={{backgroundColor: buttonTwo.backgroundColor, color: buttonTwo.color, border: buttonTwo.border}} className="two" type="primary">Second</Button>
    </div>
  )
}

export default App

Answer 2

尝试通过这种方式改变

return (
<div>
  <Button style={{backgroundColor: buttonOne.backgroundColor, border: buttonOne.border, color: buttonOne.color}} className="one" type="primary">First</Button>
  <Button onClick={() => {
      buttonTwoFun(); 
      buttonOneFun();
  }} style={{backgroundColor: buttonTwo.backgroundColor, color: buttonTwo.color, border: buttonTwo.border}} className="two" type="primary">Second</Button>
 </div>
)