时间戳

首页 > 解决方案 > 使用钩子 React 进行切换时出现意外输出但预期视图

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

问题描述

我正在尝试使用钩子创建切换功能，一页是编辑页，另一页是视图。

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

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>
  )
}

我希望在显示编辑为真时显示编辑屏幕，当显示视图为真时显示查看屏幕。但是，当在编辑屏幕上时，我从控制台得到：“showEdit”“showView”

当我点击查看按钮时，我得到“showView”

标签： reactjsreact-nativereact-hooks

解决方案

你误解了 useState 钩子

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

第二个值（这里是showView）实际上是设置状态的函数，应该命名为toggleView。

showView 始终为 true，因为它是一个函数，并且每次都会调用您的 console.log。

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

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

如果 showEdit 为真，这将显示 EditScreenToggle。如果不是 ViewScreenToggle 将可见。

希望这可以帮助。

推荐阅读