React中使用对象管理state时textarea输入失效的原因

场景2的代码输入功能失效，核心有两个问题：

1. 直接修改原state对象，违反React不可变状态原则 #

在handleTextAreaType函数里，const newTsData = tsData;并没有创建新对象，只是把原state对象的引用赋值给了newTsData。后续修改newTsData.description本质是直接修改原state对象。

React依赖state的引用变化判断是否触发重渲染，由于新对象和原对象引用完全相同，React会判定state未发生变化，不会更新组件，导致输入框内容无法同步更新。

2. textarea的value绑定错误 #

场景2中textarea的value属性写的是description，但当前作用域并没有这个独立变量，正确绑定应为tsData.description，否则输入框无法正确读取state初始值，输入操作也无法和state关联。

修复后的示例代码 #

const [tsData, setTsData] = useState({
    tsname: "",
    description: "",
    plugin: 100,
    type: 900,
    freq: 100,
    report: 0,
  });
  
  const handleTextAreaType=(value)=> {
    // 创建新对象，保留原state其他属性，仅修改description
    const newTsData = {...tsData, description: value};
    setTsData(newTsData);
  }


<label>Test suite description</label>
<textarea value={tsData.description} name="description" 
    rows={4} cols={5}  style={{width: "100%"}} 
    onChange={(e) => handleTextAreaType(e.target.value)}>                                      
</textarea> 

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