React子组件触发操作后State未更新问题求助

问题描述 #

• 子组件autocomplete.component.tsx是带建议项的输入框
• 父组件form.tsx调用该子组件，搭配下拉框展示模拟数据
• 输入时formFields状态正常更新，IMovimiento接口对象显示正确
• 点击autocomplete建议项时，控制台能打印正确选中值，但formFields状态未更新，提交表单时无法获取最新值

问题根源 #

1. State异步更新的闭包陷阱：React的setState是异步操作，直接依赖当前formFields值更新时，会捕获旧的state快照，导致连续更新失效。
2. 重复的State更新操作：selectedItem中连续两次调用setFormFields更新Descripcion，第二次会基于未生效的旧state覆盖更新。
3. 普通变量替代State：ioptionLugar是普通变量而非React State，下拉框依赖它时，状态更新不会触发组件重渲染，显示异常。
4. 错误的State初始化：lugares初始值设为Array<ILugar>（构造函数）而非空数组，会导致后续映射下拉选项出错。

修复方案 #

1. 改用函数式更新State #

所有更新formFields的操作，使用函数式写法确保基于最新state修改：

// 替换原直接展开formFields的写法
setFormFields(prevState => ({ ...prevState, [name]: value }));

2. 合并重复的State更新 #

selectedItem中两次更新Descripcion的操作合并为一次：

// 原重复代码
setFormFields({ ...formFields, Descripcion: selectedOptionInAutocomplete });
setFormFields({ ...formFields, ["Descripcion"]: selectedOptionInAutocomplete });

// 修复后
setFormFields(prev => ({ ...prev, Descripcion: selectedOptionInAutocomplete }));

3. 将ioptionLugar转为React State #

把普通变量改为State，确保下拉框响应状态变化：

// 原普通变量声明
let ioptionLugar = { value: "", label: "" } as SingleValue<IOption>;

// 修复后State声明
const [ioptionLugar, setIoptionLugar] = useState<SingleValue<IOption>>({ value: "", label: "" });

在handleDropDownChange中更新该State：

if (name === "LugarId") {
  setLugar(selectedOption);
  setIoptionLugar(ioption); // 替换原赋值操作
}

4. 修正State初始化 #

将lugares初始值改为空数组：

// 原错误初始化
const [lugares, setLugares] = useState(Array<ILugar>);

// 修复后
const [lugares, setLugares] = useState<ILugar[]>([]);

完整修复后的核心代码片段 #

父组件form.tsx关键修改

const GastoForm = () => {
  // 修复：将ioptionLugar转为State
  const [ioptionLugar, setIoptionLugar] = useState<SingleValue<IOption>>({ value: "", label: "" });
  const [isOpen, setIsOpen] = useState(false);
  // 修复：初始化空数组
  const [lugares, setLugares] = useState<ILugar[]>([]);

  const [suggestions, setSuggestions] = useState<string[]>();
  const [formFields, setFormFields] = useState<IMovimiento>(
    movimientoDefaultState
  );
  const [, setLugar] = useState<SingleValue<IOption> | null>(null);

  //Methods
  const handleFieldChange = (e: ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    // 修复：函数式更新
    setFormFields(prev => ({ ...prev, [name]: value }));
  };

  //When dropdown changes
  const handleDropDownChange = (
    selectedOption: SingleValue<IOption>,
    name: string
  ): void => {
    const { value, label } = { ...selectedOption };
    // 修复：函数式更新
    setFormFields(prev => ({ ...prev, [name]: value }));
    const ioption = { value: value, label: label };

    if (name === "LugarId") {
      setLugar(selectedOption);
      // 修复：更新State而非普通变量
      setIoptionLugar(ioption);
    }
  };

  /*AUTOCOMPLETE*/
  const changeHandlerAutocomplete = async (
    e: ChangeEvent<HTMLInputElement>
  ) => {
    const { name, value } = e.target;
    // 修复：函数式更新
    setFormFields(prev => ({ ...prev, [name]: value }));

    if (value !== "" && value.length <= 2) return;

    if (value === "") {
      setIsOpen(false);
      setSuggestions([]);
      return;
    }

    const response = ["Test", "Test2", "Test3"];
    if (response) {
      setSuggestions(response);
      setIsOpen(true);
      return;
    }

    setIsOpen(false);
    setSuggestions([]);
  };

  //Method to try and grab the option from the list of autocomplete
  const selectedItem = (e: React.MouseEvent<HTMLDivElement>) => {
    const descripcion = e.currentTarget.getAttribute("data-item");

    const fakeLugar = 2;
    const selectedOptionInAutocomplete =
      descripcion !== null ? descripcion.split("-")[0].trim() : "";
    console.log(selectedOptionInAutocomplete);
    
    // 修复：合并更新，使用函数式写法
    setFormFields(prev => ({ ...prev, Descripcion: selectedOptionInAutocomplete }));

    //Handle the dropdown changes to update state, faking place 2 always to see state
    const selectedLugar = lugares.find((i) => i.LugarId === fakeLugar);
    if (selectedLugar) {
      const newIoption = {
        value: selectedLugar.LugarId.toString(),
        label: selectedLugar.Descripcion,
      };
      handleDropDownChange(newIoption, "LugarId");
    }
    setIsOpen(false);
  };
  /*AUTOCOMPLETE*/

  const mapperLugar = (): IOption[] => {
    return lugares.map((item) => {
      return { value: item.LugarId, label: item.Descripcion };
    }) as unknown as IOption[];
  };

  useEffect(() => {
    const getDropDowns = async () => {
      const responseLugar = [
        { LugarId: 1, Descripcion: "Place 1" },
        { LugarId: 2, Descripcion: "Place 2" },
      ] as ILugar[];

      setLugares(responseLugar);
    };

    getDropDowns();
  }, []);

  // 其余渲染代码不变
};

验证效果 #

• 点击autocomplete建议项后，formFields.Descripcion会正确更新
• 提交表单时能获取到最新的formFields值
• 下拉框的选中状态同步更新

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