Блог

Я работаю над проектом React, В котором у меня есть две кнопки, я применил состояние и функции к обеим кнопкам, но он показывает такую ошибку. пожалуйста, помогите мне решить эту проблему. Он показывает ошибку, подобную этой Ошибке: Слишком много повторных рендеров. 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
 

Если вы обернете эти две функции внутри a {} , вы больше не увидите этой ошибки, но я бы посоветовал вам просто использовать одну функцию 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
 

Попробуйте изменить этот способ

 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>
)