React JS中Input移入函数后仅能输入单个字符的问题求助

核心问题 #

你把Input组件定义在了App组件的内部函数里，每次App组件触发重新渲染时，这个内部组件都会被重新创建。React会把它识别成全新的组件，直接重置内部状态，所以输入框只能输入单个字符就“归零”。排序功能的异常也是同理——每次渲染都会重新生成相关处理逻辑，导致状态没法正确维持。

解决步骤 #

1. 把组件移到外部定义
   将Input组件从App内部的函数中抽出来，放在App组件的外部，保证它只被定义一次：

// 把Input组件移到App组件外部
const MyInput = ({ value, onChange }) => {
  return <input value={value} onChange={onChange} />;
};

function App() {
  const [inputValue, setInputValue] = useState("");
  
  const handleInputChange = (e) => {
    setInputValue(e.target.value);
  };
  
  // 直接使用外部定义的组件
  return (
    <div>
      <MyInput value={inputValue} onChange={handleInputChange} />
    </div>
  );
}

2. 修正排序逻辑的状态维护
   排序功能出问题，大概率是你直接修改了原数组（React状态不能直接修改），或者排序逻辑依赖的状态在每次渲染时被重新初始化。正确的做法是基于原状态生成新数组：

const handleSort = () => {
  // 基于原数组创建新的排序后数组，绝不直接修改原状态
  const sortedList = [...originalList].sort((a, b) => a - b);
  setList(sortedList);
};

3. 禁止在渲染流程内定义组件/复杂逻辑
   永远不要在组件的渲染函数、useCallback或useEffect的依赖项里动态创建组件，React会把每次创建的组件判定为不同类型，导致组件反复卸载重装，直接丢失状态。

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