React TextArea统计的单词、字符数无法存入Firebase问题

核心问题根因 #

你的代码存在两个导致计数字段无法写入的关键问题：

• React 18 开启自动批量更新机制后，你拆分调用的三次await this.setState不会按预期分步执行，所有setState会被合并为一次批量更新，你写的await无法等所有状态落地就提前触发了带防抖的update方法，导致回调里读取wordsCounted、charactersCounted时拿到的是旧值/undefined。
• Firebase 写入规则会自动丢弃值为undefined的字段，这就直接表现为两个数字字段没有被存进数据库，而同批次的title、body因为是提前存在的合法字符串值，能正常写入。
• 附加问题：初始state没有提前声明两个计数字段的默认值，放大了上面的竞态问题。

分步修复方案 #

1. 合并拆分的setState调用，等状态完全更新后再触发防抖保存
   把原来的updateBody方法改成一次性提交所有状态更新，通过setState的回调确保状态写入完成后再触发保存逻辑，从根源避免时序竞态：

   updateBody = (val) => {
       // 一次性计算所有需要更新的状态，合并提交
       const nextState = {
           input: val,
           // 优化计数逻辑：过滤连续空格导致的空字符串计数误差
           wordsCounted: val.split(/\s+/).filter(item => item).length,
           charactersCounted: val.length
       }
       // 状态更新完成的回调里再触发保存，保证能读到最新的状态值
       this.setState(nextState, () => {
           this.update();
       })
   };
   

2. 补全类组件的state初始值
   在state定义里提前给两个计数字段设置默认值，避免首次渲染时字段不存在、值为undefined：

   // 类组件的state初始化部分
   state = {
       id: '',
       title: '',
       input: '',
       wordsCounted: 0,
       charactersCounted: 0
   }
   

3. 排查封装层的字段过滤逻辑
   保存前加一行日志确认传入Firebase的参数值合法，检查你封装的noteUpdate方法有没有写死只传title、body字段，把其他自定义字段过滤掉：

   update = debounce(() => {
       const payload = {
           title: this.state.title,
           body: this.state.input,
           wordsCounted: this.state.wordsCounted,
           charactersCounted: this.state.charactersCounted
       }
       // 控制台打印校验两个计数字段是否为合法数字，不存在undefined
       console.log('提交的保存参数：', payload)
       this.props.noteUpdate(this.state.id, payload)
   }, 750);
   

   如果日志里看到两个计数字段有明确的数字值，但依然没存入数据库，就需要检查noteUpdate内部的参数组装逻辑，确认有没有把这两个字段拼接到最终传给Firebase的写入对象里。

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