英文:
Converted function component (toggle button with role permissions) stopped working
问题
我不知道"islplace"、"islon"和"isloff"变量的具体内容，但以下是代码的翻译部分：
我不知道"islplace"、"islon"和"isloff"变量的具体内容，但以下是代码的翻译部分：
```jsx
我不知道"islplace"、"islon"和"isloff"变量的具体内容，但以下是代码的翻译部分：
```jsx
我不知道"islplace"、"islon"和"isloff"变量的具体内容，但以下是代码的翻译部分：
```jsx
我不知道"islplace"、"islon"和"isloff"变量的具体内容，但以下是代码的翻译部分：
```jsx
我不知道"islplace"、"islon"和"isloff"变量的具体内容，但以下是代码的翻译部分：
```jsx
我不知道"islplace"、"islon"和"isloff"变量的具体内容，但以下是代码的翻译部分：
```jsx
我不知道"islplace"、"islon"和"isloff"变量的具体内容，但以下是代码的翻译部分：
```jsx
我不知道"islplace"、"islon"和"isloff"变量的具体内容，但以下是代码的翻译部分：
```jsx
我不知道"islplace"、"islon"和"isloff"变量的具体内容，但以下是代码的翻译部分：
```jsx
我不知道"islplace"、"islon"和"isloff"变量的具体内容，但以下是代码的翻译部分：
```jsx
我不知道"islplace"、"islon"和"isloff"变量的具体内容，但以下是代码的翻译部分：
```jsx
我不知道"islplace"、"islon"和"isloff"变量的具体内容，但以下是代码的翻译部分：
```jsx
我不知道"islplace"、"islon"和"isloff"变量的具体内容，但以下是代码的翻译部分：
```jsx
我不知道"islplace"、"islon"和"isloff"变量的具体内容，但以下是代码的翻译部分：
```jsx
我不知道"islplace"、"islon"和"isloff"变量的具体内容，但以下是代码的翻译部分：
```jsx
我不知道"islplace"、"islon"和"isloff"变量的具体内容，但以下是代码的翻译部分：
```jsx
我不知道"islplace"、"islon"和"isloff"变量的具体内容，但以下是代码的翻译部分：
```jsx
我不知道"islplace"、"islon"和"isloff"变量的具体内容，但以下是代码的翻译部分：
```jsx
我不知道"islplace"、"islon"和"isloff"变量的具体内容，但以下是代码的翻译部分：
```jsx
我不知道"islplace"、"islon"和"isloff"变量的具体内容，但以下是代码的翻译部分：
```jsx
我不知道"islplace"、"islon"和"isloff"变量的具体内容，但以下是代码的翻译部分：
```jsx
我不知道"islplace"、"islon"和"isloff"变量的具体内容，但以下是代码的翻译部分：
```jsx
我不知道"islplace"、"islon"和"isloff"变量的具体内容，但以下是代码的翻译部分：
```jsx
我不知道"islplace"、"islon"和"isloff"变量的具体内容，但以下是代码的翻译部分：
```jsx
我不知道"islplace"、"islon"和"isloff"变量的具体内容，但以下是代码的翻译部分：
```jsx
我不知道"islplace"、"islon"和"isloff"变量的具体内容，但以下是代码的翻译部分：
```jsx
我不知道"islplace"、"islon"和"isloff"变量的具体内容，但以下是代码的翻译部分：
```jsx
我不知道"islplace"、"islon"和"isloff"变量的具体内容，但以下是代码的翻译部分：
```jsx
我不知道"islplace"、"islon"和"isloff"变量的具体内容，但以下是代码的翻译部分：
```jsx
我不知道"islplace"、"islon"和"isloff"变量的具体内容，但以下是代码的翻译部分：
```jsx
我不知道"islplace"、"islon"和"isloff"变量的具体内容，但以下是代码的翻译部分：
```jsx
我不知道"islplace"、"islon"和"isloff"变量的具体内容，但以下是代码的翻译部分：
```jsx
我不知道"islplace"、"islon"和"isloff"变量的具体内容，但以下是代码的翻译部分：
```jsx
我不知道"islplace"、"islon"和"isloff"变量的具体内容，但以下是代码的翻译部分：
```jsx
我不知道"islplace"、"islon"和"isloff"变量的具体内容，但以下是代码的翻译部分：
```jsx
我不知道"islplace"、"islon"和"isloff"变量的具体内容，但以下是代码的翻译部分：
```jsx
我不知道"islplace"、"islon"和"isloff"变量的具体内容，但以下是代码的翻译部分：
```jsx
我不知道"islplace"、"islon"和"isloff
<details>
<summary>英文:</summary>
I had to convert my class component into function component since I will have to use hooks for redux(useDispatch();)
Everything seemed okay except the thing that toggle button doesnt want to work.
As a comparison I post a class component code(a bit of it) and function component code(more of it)
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})
};
}
And here is the function component code:
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>
);
}
</details>
# 答案1
**得分**: 1
当您初始化状态时，您以一种方式创建了您的`open`状态，其中`open`是一个布尔原始值。
```javascript
const [open, setOpen] = useState(true);
现在，open的唯一可能值是true或false。
然后，在您的代码中，您还期望它保持这种形式，正如您在这里所看到的：
const getImageName = () => open ? 'islOnn' : 'islOfff'
正如您可以看到的，open并没有被用作对象。
但是，在您实际设置状态的代码中，您向setOpen函数传递了一个对象，正如您在这里看到的：
setOpen({open: !open})
这段代码应该被更改为接受true或false，而不是带有open键的对象。
换句话说，代码可以这样编写：
const toggleImage = () => {
if (checkRole(role)) {
setOpen(!open); // 这里没有 {}，它不是一个对象。
}
}
英文:
When you initailized your state you made in a way where your open state is a boolean primitive
const [open, setOpen] = useState(true);
Now the only values for open are either true or false
Then further in your code you are also expecting to be in this same shape as you can see here.
const getImageName = () => open ? 'islOnn' : 'islOfff'
as you can see open is not being used as an object.
But in your code where you are actually setting the state you are passing an object to your setOpen function as you can see here
setOpen({open: !open})
this code should be changed to accept either true or false, and not an object with key of open.
In other words the code can be written like so.
const toggleImage = () => {
if(checkRole(role)) {
setOpen(!open) // no {} here its not an object.
};
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论