如何使用 useState 钩子正确实现反应图标？

Question

在 React 上，我尝试制作一个功能，让用户可以通过在单击它时更改其图标来在屏幕上看到活动反馈。

一旦我点击它，我怎样才能让它变成另一个图标（例如从 Box 到 BoxChecked）？

注意：我知道这个代码行是问题......（呜咽）

<img src={click} alt="icon" onClick={handleClick} />

应用程序.jsx

import React, { useState } from 'react'
import './App.css'
import { GrCheckbox as Box }  from 'react-icons/gr'
import { GrCheckboxSelected as BoxChecked } from 'react-icons/gr' 

export default function App() {
  const [icon, setIcon] = useState(false);
  const [click, setClick] = useState(Box);
  
  function handleClick() {
    setIcon(!icon); 
    icon ? setClick(Box) : setClick(BoxChecked);
  }
  return (
    <div className="App">
        <img src={click} alt="icon" onClick={handleClick} />
        <p>Clicked {click} times</p>
    </div>
  );
}

Answer 1

useState是异步的，因此在处理程序中执行setIcon后，您不会立即获得 icon 的值。 您需要将setClick调用放在useEffect挂钩中：

React.useEffect(() => {
    icon ? setClick(Box) : setClick(BoxChecked);
}, [icon]);

function handleClick() {
    setIcon(!icon); 
}

此效果将在图标更改时执行，因为它已添加到useEffect的依赖数组中。 查看文档以获取更多信息： https ://reactjs.org/docs/hooks-effect.html

Answer 2

不建议将组件存储在 state 中。 使用条件设置src 。

    <img src={icon ? Box : BoxChecked} alt="icon" onClick={handleClick} />

将处理程序更改为此

function handleClick() {
    setIcon(prevIcon => !prevIcon); 
}

或更好

const handleClick = useCallback(() => {
      setIcon(prevIcon => !prevIcon); 
}, []);