React-Table设置global-Filter默认值后输入框无法输入如何解决

你写的useEffect没有指定依赖数组，这会导致每次组件渲染的时候都会执行回调：你在输入框输入内容触发setFilter更新filter状态后，组件重渲染，useEffect立刻又把filter重置为固定字符串projekt，所以看起来就像没法输入内容。

给useEffect添加空的依赖数组[]，这样只会在组件首次挂载完成后执行一次设置默认值的逻辑，后续渲染不会重复触发，就不会覆盖你输入的内容了。
修改后的完整代码如下：

import React, { useEffect } from "react";

export const GlobalFilter = ({ filter, setFilter }) => {
  // 仅首次挂载时设置默认过滤值
  useEffect(()=>{
    setFilter("projekt");
  }, []) // 此处添加空依赖数组
    
  return (
    <span>
      <input
        id="globalFilterOrderHistory"
        className="input searchHistoryOrder"
        placeholder="Search"
        value={filter || ""}
        onChange={(e) => setFilter(e.target.value)}
      />
      <i className="fa fa-search fa-1_5" />
    </span>
  );
};

• 如果你的默认值来自外部props，需要把对应的props变量加到依赖数组里，比如默认值是props.defaultFilter，就把依赖数组改成[props.defaultFilter]，避免出现闭包问题。
• 如果你使用React 18+的严格模式，开发环境下组件会挂载两次，空依赖的useEffect会执行两次，该情况属于React的开发校验逻辑，不影响生产环境功能。

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