javascript - 转换后的功能组件(具有 Angular 色权限的切换按钮)停止工作

Question

我必须将我的类组件转换为函数组件，因为我必须使用 redux(useDispatch();) 的钩子(Hook)一切看起来都很好，除了切换按钮不起作用。作为比较，我发布了类组件代码(一部分)和函数组件代码(更多)

 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

当你初始化你的状态时，你的open状态是一个 bool 原语

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

现在 open 的唯一值是 true 或 false

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

const getImageName = () => 打开？ 'islOnn' : 'islOfff'

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

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

setOpen({open: !open})

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

也就是说代码可以这样写。

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