React受控组件初始值问题：API获取数据无法赋值

问题核心在于：FOO组件的inputValue状态仅在组件挂载时通过useState初始化一次。当父组件BAR通过API异步获取到fetchedData后，props.initialValue发生变化，但FOO内部的状态不会自动同步，导致输入框无法显示最新的初始值。

提供两种可行解决方案：

方案一：在FOO组件中监听props变化同步状态 #

通过useEffect监听props.initialValue和props.editState的变化，当外部传入的初始值更新时，同步更新输入框的内部状态。

修改后的FOO组件代码：

const FOO = props => {
  const [inputValue, setInputValue] = useState(
    props.editState ? props.initialValue : ""
  );

  // 监听初始值和编辑状态变化，同步输入框值
  useEffect(() => {
    if (props.editState) {
      setInputValue(props.initialValue);
    }
  }, [props.editState, props.initialValue]);

  const setSearchQuery = (value) => {
    setInputValue(value);
    props.onSearch(value);
  };

  return (
    <input
      placeholder="Select ..."
      onChange={(e) => setSearchQuery(e.target.value)}
      value={inputValue}
    />
  );
};

方案二：将FOO改为完全受控组件 #

移除FOO内部的状态管理，输入框的值完全由父组件通过props传递，更新逻辑也由父组件控制。这种方式更符合React受控组件的设计理念，状态统一在父组件管理，避免内外状态不一致的问题。

修改后的FOO组件 #

const FOO = props => {
  const handleChange = (e) => {
    const value = e.target.value;
    props.onChange(value);
    props.onSearch(value);
  };

  return (
    <input
      placeholder="Select ..."
      onChange={handleChange}
      value={props.value}
    />
  );
};

修改后的BAR组件使用方式 #

const BAR = props => {
  const [fetchedData, setFetchedData] = useState({ value: "" });
  const [inputValue, setInputValue] = useState("");
  const params = useParams();

  // 异步获取数据并同步输入框值
  useEffect(() => {
    if (params.ID) {
      // 替换为实际API请求逻辑
      fetch(`/api/your-endpoint/${params.ID}`)
        .then(res => res.json())
        .then(data => {
          setFetchedData(data);
          setInputValue(data.value);
        });
    } else {
      setInputValue("");
    }
  }, [params.ID]);

  const searchSomethingHandler = (value) => {
    // 你的搜索处理逻辑
  };

  return (
    <FOO
      value={inputValue}
      onChange={setInputValue}
      onSearch={searchSomethingHandler}
    />
  );
};

方案选择建议 #

• 若FOO组件需要独立使用、保留内部状态管理，优先选择方案一；
• 若输入框的状态需要和父组件的其他业务状态联动，或希望统一状态管理，优先选择方案二。

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