React组件修改const状态变量时页面内容全部消失如何解决

React函数组件开发过程中，尝试修改const声明的变量值时，页面所有渲染内容全部消失，对应问题代码如下：

import React,{useState} from 'react'

export default function Box() {

  const [count,setCount] = useState('hello);
  setCount("welcome")
  return (
    
    <div className="box">
    <textarea name="input" id="input1" cols="30" rows="10" value={count}></textarea>
    
      <button value="up was clickd" id='btn1' >Convert toupper case</button>
    </div>
    
  )
}

• 基础语法错误：原代码中useState('hello)的字符串单引号未闭合，会直接导致编译失败，页面无法正常渲染。
• 响应式变量使用规则违反：通过const解构得到的state变量count是只读常量，禁止直接赋值修改，直接写count = xxx属于JS基础语法错误，会阻断代码编译。所有对count值的更新必须通过配套的setCount方法传入新值完成，不能直接给count赋值。
• 触发无限重渲染循环：原代码在函数组件的顶层渲染作用域直接调用setCount("welcome")，执行逻辑形成死循环：组件首次渲染执行函数体 → 调用setCount触发state更新 → 组件重新渲染再次执行函数体 → 再次调用setCount触发更新，循环往复直到浏览器内存溢出，最终页面崩溃白屏，所有渲染内容消失。

• 先修正所有基础语法错误，补全字符串闭合引号，杜绝直接对const声明的count变量做赋值操作。
• 禁止在组件顶层渲染流程中直接调用state更新函数，state更新逻辑需要放在事件回调、useEffect副作用钩子等不会在渲染阶段重复无差别执行的位置。
• 按业务场景绑定更新逻辑：如果需要点击按钮时修改count值，将setCount调用绑定到按钮的onClick事件中；如果需要组件挂载后自动更新值，将逻辑放入依赖为空数组的useEffect中，确保逻辑仅执行一次；如果textarea需要支持输入修改，给textarea绑定onChange事件同步值。

修复后的可运行完整代码示例：

import React,{useState} from 'react'

export default function Box() {
  const [count,setCount] = useState('hello')
  return (
    <div className="box">
      <textarea 
        name="input" 
        id="input1" 
        cols="30" 
        rows="10" 
        value={count}
        onChange={(e) => setCount(e.target.value)}
      ></textarea>
      <button 
        value="up was clickd" 
        id='btn1'
        onClick={() => setCount("welcome")}
      >
        Convert toupper case
      </button>
    </div>
  )
}

如果需要组件首次加载时自动将count修改为welcome，可以使用useEffect包裹更新逻辑，避免循环渲染：

import React,{useState, useEffect} from 'react'

export default function Box() {
  const [count,setCount] = useState('hello')
  // 空依赖数组表示仅组件首次挂载时执行一次，不会触发循环更新
  useEffect(() => {
    setCount("welcome")
  }, [])

  return (
    <div className="box">
      <textarea 
        name="input" 
        id="input1" 
        cols="30" 
        rows="10" 
        value={count}
        onChange={(e) => setCount(e.target.value)}
      ></textarea>
      <button value="up was clickd" id='btn1' >Convert toupper case</button>
    </div>
  )
}

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