React中点击IconButton切换MUI图标不生效的问题求助

问题原因 #

你代码里的判断逻辑存在语法错误：

if ({btnClicked}) {

这里你给btnClicked套了一层大括号，相当于创建了一个新对象{btnClicked: 你传入的props值}，在JavaScript中所有对象的布尔判定结果都是true，所以不管你传入的btnClicked是true还是false，这个判断永远成立，只会渲染BorderColorIcon，自然不会切换到Undo图标。

修复方法 #

直接删掉判断里的大括号，直接用传入的props变量判断即可：

if (btnClicked) {

可选优化建议 #

你不需要把两个图标拆成两个返回JSX的独立函数，用三元表达式写更简洁，代码可读性更高：

import React from 'react';
import {IconButton } from '@material-ui/core';
import UndoIcon from '@mui/icons-material/Undo';
import BorderColorIcon from '@mui/icons-material/BorderColor'

const AddButton = ({onBtnClick, btnClicked}) => {
  return (
    <div>
      <IconButton
        aria-label="toggle icon"
        onClick={onBtnClick}
      >
        {btnClicked ? 
          <BorderColorIcon color="secondary" style={{cursor:'pointer'}} /> :
          <UndoIcon color="secondary" style={{cursor:'pointer'}} />
        }
      </IconButton>
    </div>
  )
}

export default AddButton

同时要确认父组件调用该组件时，onBtnClick回调中正确更新了btnClicked对应的状态值，参考父组件写法：

const [btnClicked, setBtnClicked] = useState(false)
// 调用组件
<AddButton 
  btnClicked={btnClicked}
  onBtnClick={() => setBtnClicked(prev => !prev)}
/>

内容的提问来源于stack exchange，提问作者avihaiB