React项目中textarea输入内容后网页消失问题排查

• 核心崩溃原因：useState状态存储的类型前后不一致，触发了React运行时渲染错误。你初始化text状态时无默认值，类型为undefined，但在textarea的onChange回调中调用setText时传入了一个对象{text: event.target.value}，后续你将这个对象直接传入Previewer组件放在{text}位置渲染，React不支持直接将普通对象作为子元素渲染，直接抛出致命错误导致整个应用组件树卸载，表现为网页消失。
• 次要问题1：React框架中label标签的原生for属性需要写作htmlFor，否则无法正常关联输入框，还会抛出控制台警告。
• 次要问题2：useState未设置初始空字符串，会触发非受控组件转受控组件的运行时警告。
• 若你未通过模块解构导入useState，直接调用useState会抛出未定义错误，需要替换为React.useState。

// 如使用CDN引入React，删除下面的导入语句，将useState替换为React.useState
import { useState } from 'react';

const Previewer = (props) => {
  let {text} = props
  return (
    <div>
      <p>{text}</p>
    </div>
  )
}

const App = () => {
  // 初始值设为空字符串，状态直接存储输入的文本内容
  let [text, setText] = useState('')
  return (
    <>
      <label htmlFor="text-edit">Editor</label>
      <textArea 
        id="text-edit" 
        value={text} 
        placeholder="Type Here..." 
        onChange={(event) => setText(event.target.value)}
      />
      <Previewer text={text} /> 
    </>
  )
}

const root = document.querySelector('#root')
ReactDOM.render(<App />,  root)

内容的提问来源于stack exchange，提问作者K.Nes