React使用Debouncing防抖调用API后状态重置为默认值问题

这是典型的React闭包陷阱，两个问题叠加导致状态重置：

• 子组件里空依赖数组的useCallback永久捕获了首次渲染时的addOrUpdateNote方法引用，这个旧方法里拿到的addNote、updateNote回调，闭包中存储的notes状态永远是初始空数组[]
• App.js里的addNote更新状态时直接读取外层作用域的notes变量，防抖触发时拿到的是初始空值，执行setNotes时就会把现有状态覆盖成空数组拼接新笔记的结果，看起来就像状态被重置成默认值。

1. 修改App.js状态更新逻辑，规避闭包旧值问题 #

所有更新notes状态的逻辑，都要用setState的函数式写法，永远拿到最新状态，不要直接依赖外层作用域的状态变量。修改后的addNote代码如下：

// 记得先引入useCallback
import { useState, useCallback } from 'react';

const addNote = useCallback(async (note) => {
  const newNote = await CreateNote(note); // 原有API调用逻辑保留
  // 函数式更新，入参是当前最新的notes状态，不受闭包旧值影响
  setNotes(prevNotes => {
    const newNotes = [...prevNotes];
    newNotes.unshift(newNote);
    return newNotes;
  });
  setActiveNote(newNote);
}, []); // 因为没有直接依赖外层状态，这里可以用空依赖

注意：updateNote方法也要做同样改造，所有修改notes的逻辑都用函数式更新，同时用useCallback包裹，避免每次渲染生成新的函数引用。

2. 修改note-editor.js的防抖逻辑，避免锁死旧闭包 #

不要把每次渲染重新生成的addOrUpdateNote直接传入防抖封装，用ref存储最新的方法引用，保证防抖函数触发时调用的永远是最新版本的逻辑：

import { useCallback, useRef, useEffect } from 'react';

// 把debounce方法提到组件作用域外，避免每次渲染重新创建
const debounce = (func) => {
  let timer;
  return function(...args) {
    const context = this;
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => {
      timer = null;
      func.apply(context, args);
    }, 500);
  }
}

// 组件内部
const NoteEditor = ({ addNote, updateNote, activeNote, activateNote }) => {
  // 用ref存储最新的业务方法
  const addOrUpdateNoteRef = useRef();

  const addOrUpdateNote = (note) => {
    if (!note.createdDate) {
      if (note.title.trim() || note.body.trim()) {
        addNote(note);
      }
    } else {
      updateNote(note);
    }
  };

  // 每次渲染后更新ref中存储的最新方法
  useEffect(() => {
    addOrUpdateNoteRef.current = addOrUpdateNote;
  }, [addOrUpdateNote]);

  // 防抖函数只初始化一次，触发时调用ref里的最新方法
  const optimizedAddOrUpdateNote = useCallback(
    debounce((...args) => addOrUpdateNoteRef.current(...args)),
    []
  );

  const handleNoteChange = (e) => {
    let newNote = { ...activeNote, [e.target.name]: e.target.value };
    activateNote(newNote);
    optimizedAddOrUpdateNote(newNote);
  };

  // 原有return的JSX逻辑保持不变
  return (
    <div className={Classes["note-editor-body"]}>
      <input
        type='text'
        name='title'
        placeholder='title...'
        onChange={handleNoteChange}
        value={activeNote.title}
      />
      <textarea
        maxLength={AppConstants.NOTE_BODY_CHARACTER_LIMIT}
        name='body'
        placeholder='add your notes here'
        onChange={handleNoteChange}
        value={activeNote.body.slice(
          0,
          AppConstants.NOTE_BODY_CHARACTER_LIMIT
        )}
      />
    </div>
  )
}

改完后可满足以下效果：

• 连续输入触发防抖时，已有笔记列表不会被重置
• 新建、编辑笔记的CRUD逻辑和直接调用无防抖版本表现完全一致
• 防抖逻辑正常生效，不会每次按键都发起API请求

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