React条件渲染场景下报onChange is not function错误

不需要修改现有条件渲染的核心逻辑，补全几个写法疏漏就能直接修复。写在条件判断分支内的事件函数React可以正常识别，onChange is not a function的报错和函数放在分支里没有任何关系。

你贴的代码有三个疏漏，会直接或间接触发这个报错：

• 作用域内缺失user变量定义：非编辑分支直接渲染{user.lastname}，但组件里从来没声明过user，首次渲染时读取undefined的属性会直接抛运行时错误，浏览器控制台经常会把这类渲染初始阶段的错误和后续事件绑定的错误混报，很容易误导排查方向。
• 存在渲染时序漏洞：如果拉取用户数据、切换updateInfoUser状态时没做兜底，会出现input元素已经完成渲染，但对应的状态更新方法还没完成绑定的边缘情况，直接触发onChange类型错误。
• 输入框不符合React受控组件规范：只绑定了onChange事件，没绑定对应的value属性，React在处理非受控/受控组件切换时，也可能偶发事件绑定失败的问题。

原有三目运算符做条件渲染的逻辑完全保留，只补全缺失的定义、兜底判断和受控绑定即可：

import { useState, useEffect } from 'react'

const DataUser = () => {
  const [lastname, setLastname] = useState("")
  const [updateInfoUser, setUpdateInfoUser] = useState(false)
  // 补全user状态定义，初始值设为空对象做兜底
  const [user, setUser] = useState({ lastname: "" })

  // 替换成你原有的用户数据拉取逻辑
  useEffect(() => {
    const getUserData = async () => {
      // 你的接口请求逻辑
      // const res = await request('/api/user/info')
      // setUser(res.data)
    }
    getUserData()
  }, [])

  return (
    <>
      <div>
        <h3>name:</h3>
        {
          updateInfoUser === true
            ? <input
                type="text"
                name="nom"
                // 补全value绑定，符合受控组件要求
                value={lastname || user.lastname}
                onChange={(e) => setLastname(e.target.value)}
              />
            : <div>
                {/* 加可选链兜底，避免用户数据未加载时读属性报错 */}
                <p>{user?.lastname}</p>
              </div>
        }
        {/* 编辑切换按钮，替换成你原有的按钮逻辑即可 */}
        <button onClick={() => setUpdateInfoUser(prev => !prev)}>
          {updateInfoUser ? '取消编辑' : '编辑信息'}
        </button>
      </div>
    </>
  )
}

JSX里不管是写在条件分支、循环里的内联函数，只要对应元素渲染时函数是合法可执行的，就不会出现识别失败的问题，没必要为了这个报错把逻辑拆得支离破碎。之前的报错本质是渲染阶段的未定义错误、时序问题引发的误报，补全兜底后就会消失。

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