React动态组件无法访问props函数致父状态丢失问题求助

问题根源 #

你的问题出在闭包捕获旧状态上：父组件的getData函数在创建时会捕获当时的inputData值。动态添加的子组件拿到的getData是父组件在添加该子组件时渲染生成的版本，这个版本里的inputData还是旧的状态值（比如初始值或者添加动态组件时的状态）。当动态组件触发更新时，getData会用这个旧的inputData和新数据合并，直接覆盖掉之前所有已输入的状态。

解决方案 #

核心是改用函数式更新来修改父组件状态，同时简化子组件的冗余状态逻辑：

1. 修改父组件的getData函数

使用setInputData的函数式更新形式，确保每次更新都基于最新的状态，而不是闭包中的旧值：

const initialData = {
  spanish: "",
};

const [inputData, setInputData] = useState(initialData);

// 改用函数式更新，prevData是最新的状态值
const getData = (data: { [key: string]: string }) => {
  setInputData(prevData => ({ ...prevData, ...data }));
};

2. 简化子组件逻辑

子组件里的data状态完全是冗余的，可以直接在输入变化时调用父组件的方法，减少不必要的useEffect：

import React, { useState } from 'react';

interface LanguageInputProps {
  language: string;
  getValue: (data: { [key: string]: string }) => void;
}

const LanguageInput: React.FC<LanguageInputProps> = (props) => {
  const [input, setInput] = useState("");

  const handleInput = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newValue = e.target.value;
    setInput(newValue);
    // 直接传递当前语言的最新输入值给父组件
    props.getValue({ [props.language]: newValue });
  };

  return (
    <input
      id={`${props.language}Input`}
      name={`${props.language}Input`}
      placeholder={`Type a word in ${props.language}`}
      type="text"
      value={input}
      onChange={handleInput}
    />
  );
};

export default LanguageInput;

3. 确保动态组件的key正确

动态渲染子组件时，一定要用唯一且稳定的key（比如语言名称），避免React复用旧组件的状态：

// 假设dynamicLanguages是动态添加的语言数组
{dynamicLanguages.map(lang => (
  <LanguageInput 
    key={lang} 
    language={lang} 
    getValue={getData} 
  />
))}

效果验证 #

修改后再测试你的场景：

1. 动态组件输入"a"，父状态变为{spanish: "a"}
2. 静态组件输入"b""c""d"，父状态依次合并为{spanish: "a", spanishStatic1: "b", ...}
3. 再次在动态组件输入"a"，父状态会基于最新的{spanish: "a", spanishStatic1: "b", ...}合并，结果为{spanish: "aa", spanishStatic1: "b", ...}，不会丢失其他字段。

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