React defaultValue && setState的问题

Posted by Bibooo on 07-15,2022

场景

我在做一个类似 p2p 好友发送信息的场景 B连接到A之后,将 defauleValue 值改变

我控制了 input 不可输入 和 默认值 连接之后改变成可输入默认值修改。

问题:可输入解决了,默认值没变 :我刚以为是 useState 的问题

react 为了提高整体的渲染性能,会将一次渲染周期中的 state 进行合并,在这个渲染周期中你对所有setState的所有调用都会被合并起来之后,再一次性的渲染,这样可以避免频繁的调用setState导致频繁的操作dom。于是我写了 useState 回调

 setWait((wait)=>wait = false);
 setWaitTitle((waitTitle)=>waitTitle = '开始发送信息吧');

事实证明还是不行,与是我觉得是 defaultValue 的问题,都知道 react 的受控表单控件 其实 defaultValue 是 react库自己的属性,我一直以为是原生属性 所以 react 为处理这样的问题让我们为元素加 key

 <textarea id="comment" ref={refValue} disabled={wait} defaultValue={waitTitle} key={waitTitle} rows="1"></textarea>

现在就成功解决了