React Context结合Input组件出现字符重复问题求助

问题根源 #

1. 错误的状态更新逻辑：自定义的SetSearchTerm函数错误地将旧状态与输入框的完整值拼接，而不是直接替换为新值。input的onChange事件传递的e.target.value是输入框的当前完整内容，每次输入都会触发重复拼接，导致内容异常叠加。
2. Provider组件参数缺失：ProductSearchTermContextProvider未声明接收children props，属于代码漏洞，会导致包裹的子组件无法正常渲染。

修正后的代码 #

import React, { createContext, useContext, useState } from "react";

export const ProductSearchTermContext = createContext(["", undefined]);

// 声明接收children参数
function ProductSearchTermContextProvider({ children }: { children: React.ReactNode }) {
  const [searchTerm, setSearchTerm] = useState("");

  // 直接传递原生状态设置函数，无需自定义拼接逻辑
  return (
    <ProductSearchTermContext.Provider value={[searchTerm, setSearchTerm]}>
      {children}
    </ProductSearchTermContext.Provider>
  );
}

function Input() {
  const [searchTerm, setSearchTerm] = useContext(ProductSearchTermContext);

  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    // 受控组件直接用输入框完整值更新状态
    setSearchTerm!(e.target.value);
  };

  return <input value={searchTerm} onChange={onChange} />;
}

export default function App() {
  return (
    <ProductSearchTermContextProvider>
      <Input />
    </ProductSearchTermContextProvider>
  );
}

关键修正点 #

• 移除错误拼接逻辑：受控输入组件需要用输入框的完整值直接更新状态，因此直接使用React原生的setSearchTerm即可，无需自定义拼接函数。
• 修复Provider参数：为ProductSearchTermContextProvider添加children props声明，确保子组件能被正确渲染。
• 优化类型与事件处理：将事件参数类型从any改为React.ChangeEvent<HTMLInputElement>提升类型安全性，同时移除不必要的e.preventDefault()（input的onChange事件无需阻止默认行为）。

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