转换后的功能组件（具有角色权限的切换按钮）停止工作

Question

我不得不将类组件转换为功能组件，因为我必须对redux（useDispatch（）;使用钩子）一切似乎还好，但切换按钮不想起作用。作为比较，我发布了一个类组件代码（部分）和函数组件代码（部分）

 state = {
    open: true,
    role: ""
}


 componentDidMount() {
 if (this.props.auth.user) 
{
this.setState({role: this.props.auth.user.role});
 }
 }

 checkRole = (role) => {
 if (role === 'Menager' || role === 'Technolog')
  {
  return true }
else 
{
  return false
};
}

toggleImage = () => {
if(this.checkRole(this.state.role)) {
this.setState({open: !this.state.open})
};
}

这是功能组件代码：

 const Islbutton = props => {

  const [open, setOpen] = useState(true);
 const [role, setRole] = useState('');



 useEffect(() => {
 if (props.auth.user) 
 {
 setRole({role: props.auth.user.role});
   }
 });


 const checkRole = (role) => {
 if (role === 'Menager' || role === 'Technolog')
  {
   return true }
 else 
{
  return false
};
}

  const toggleImage = () => {
 if(checkRole(role)) {
 setOpen({open: !open})
 };
 }

 const getImageName = () => open ? 'islOnn' : 'islOfff'



        return(

          <div>

            <img style={islplace} src={open ? islon : isloff }  onClick={()=> toggleImage(role)} />
          </div>
        );
}

Answer 1

const toggleImage = () =>

应该是

const toggleImage = (role) =>

Answer 2

const [open, setOpen] = useState(true);

现在打开的唯一值是true或false

然后，在代码中，您还将期望与此处看到的形状相同。

const getImageName = () => open ? 'islOnn' : 'islOfff'

如您所见，open未被用作对象。

但是在您实际上设置状态的代码中，您正在将对象传递给setOpen函数，如您在此处看到的

setOpen({open: !open})

此代码应更改为接受true或false，而不接受具有open键的对象。

换句话说，代码可以这样写。

 const toggleImage = () => {
 if(checkRole(role)) {
    setOpen(!open) // no {} here its not an object.
  };
 }