使用钩子 React 进行切换时意外输出但预期视图

Question

我正在尝试使用钩子创建一个切换函数，一页是编辑页面，另一页是视图。

下面给了我预期的视觉输出，即当单击编辑显示编辑时，当单击视图显示视图时。但是，控制台日志显示下面发生的事情是错误的。 请帮忙？

export default function EditProfileToggle (props) {
const [showEdit, showView] = useState(true);

if(showEdit) {
console.log("showEdit")
}
if(showView){
console.log("showView")
}
return (
<View style={{flex:1}}>
<View style={{flexDirection: "row", paddingHorizontal: 80}}>
<View>
<Button title="Show Edit" onPress={()=>{showView(true)}} />
</View>
<View>
<Button title="Show View" onPress={()=>{showView(false)}} />
</View>
</View>

<View style={{flex:1}}>
{showEdit && <EditScreenToggle /> || showView && <ViewScreenToggle/> }
</View>
</View>
)
}

export function EditScreenToggle () {
return (
<View style={{flex:1}}>
<EditScreen />
</View>
)
}
export function ViewScreenToggle () {
return (
<View style={{flex:1}}>
<ViewScreen />
</View>
)
}

我希望在显示"编辑">

为真时显示"编辑屏幕"，在显示"视图"为真时显示"查看"屏幕。但是，在编辑屏幕上，我从控制台获得： "显示编辑" "显示视图">

当我单击"查看"按钮时，我得到"showView">

Answer 1

你误解了useState钩子

数组中的第一个值(此处为showEdit(是存储在状态中的值。

第二个值(此处为 showView(实际上是设置状态的函数，应命名为 toggleView。

showView 始终为真，因为它是一个函数，您的控制台.log每次都会被调用。

重命名 showView 并仅检查 showEdit 是否为真，如下所示：

{showEdit ? <EditScreenToggle /> : <ViewScreenToggle/> }

这将显示编辑屏幕切换，如果显示编辑为真。如果不是，则视图屏幕切换将可见。

希望这有帮助。