React中如何基于布尔值切换渲染普通与可编辑个人资料页面

问题原因 #

你直接用普通变量声明isInEditMode不生效，核心是两个原因：

• React函数组件的普通变量，在组件每次重新渲染时都会被重置为初始值
• 修改普通变量不会触发React组件的重渲染流程，页面自然不会跟着变量值更新

改造步骤 #

你提到的useState是React官方提供的状态管理Hook，专门用来解决这类需要触发页面更新的变量管理问题，按下面步骤调整即可：

1. 先在文件顶部引入useState

import { useState } from 'react'

2. 在Profile组件顶部声明编辑状态

function Profile(props) {
  // 第一个参数isInEditMode是状态值，第二个setIsInEditMode是修改状态的专用方法，括号里的false是初始值
  const [isInEditMode, setIsInEditMode] = useState(false)
  // 后面接你原来的returnNormalProfile、returnEditableProfile方法定义

3. 修改handleEdit方法，同时阻止表单默认提交行为（否则点击提交按钮会刷新页面，状态会全部重置）

const handleEdit = (e) => {
  e.preventDefault()
  setIsInEditMode(true)
}

4. 调整你的渲染逻辑（注意你现在的逻辑写反了：编辑模式下应该返回可编辑的资料，非编辑模式返回普通资料，你原来的判断分支返回内容搞反了，需要调整）

const existsCookie = // 你原来的判断登录态的逻辑
if (existsCookie) {
  if(isInEditMode){
    return(
      <div>
        {/* 编辑模式返回可编辑内容 */}
        {returnEditableProfile()}
      </div>
    )
  }else{
    return(
      <div>
        {/* 非编辑模式返回普通内容 + 编辑按钮 */}
        {returnNormalProfile()}
        <form onSubmit={handleEdit} style={{ textAlign: 'center' }}>
          <input type="submit" value="编辑资料" />
        </form>
      </div>
    )
  }
} 
return <div>NotLoggedIn</div>
}

注意事项 #

• 所有需要触发页面更新的变量，都必须用useState这类React状态API管理，修改时必须调用对应的状态更新方法，不能直接给状态变量赋值
• 表单提交事件一定要加e.preventDefault()阻止默认刷新行为，否则所有状态都会被重置
• 可编辑页面如果需要退出编辑的按钮，只要调用setIsInEditMode(false)即可

内容的提问来源于stack exchange，提问作者test account