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

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

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

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

现在 open 的唯一值是 true 或 false

然后，在您的代码中，您也期望与您在此处看到的相同。

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

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

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

setOpen({open: !open})

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

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

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