Reactjs React.MEMO（）无法在KendoReact中使用其中的钩子（可能是useDispatch）

我在里面有一个子过滤器输入组件，我的goa正在停止该组件再次渲染，并在输入字段中保存“输入文本”

   <GridColumn
      field="name"
      title="Document Name"
      headerCell={HeaderCell}
      className="tableCell"
      cell={LinkCell}
      filterCell={() =>  <SearchInput className={filtersToggler} /> }
      footerCell={(props) => <FooterCell {...props} colSpan={4} total={total}></FooterCell>}
    />

那有什么问题？SearchInput Componenet会重新渲染，即使它的内部是React.memo（），我从分析器中得到的SearchInput渲染是因为“hook change”

---

我完全被卡住了，我不知道如何处理。

您不必要地将本地状态设置为

const[word，setWord]=useState（“”），由于本地状态已更改，setWord将重新呈现组件。您可以将输入设置为

下面是一个您可以做的示例：


const{Provider，useDispatch}=ReactRedux；
const{createStore，applyMiddleware，compose}=Redux；
const{useCallback}=React；
常量initialState={}；
const reducer=（state，{type，term}）=>{
console.log（'in reducer'，type，term）；
返回状态；
};
//使用redux开发工具创建存储
康斯特康塞恩汉斯酒店=
窗口。uuu REDUX_vtools_uextension_uuucompose_uu124; COMPOSE；
const store=createStore(
减速器，
初始状态，
复合致癌物(
applyMiddleware(
（）=>（下一步）=>（操作）=>下一步（操作）
)
)
);
常数衰减=（fn，时间）=>{
让定时器；
返回（…参数）=>{
清除超时（计时器）；
计时器=设置超时（（）=>fn（…args），时间）；
};
};
const SearchInput=React.memo（函数SearchInput（）{
log（'rendering SearchInput'）；
const dispatch=usedpatch（）；
const deb=useCallback(
去盎司(
（text）=>dispatch（{type:'SET_TERM'，TERM:text}），
1000
),
[]
);
返回(
{
deb（即目标值）；
}}
>
);
});
常量应用=（）=>{
返回；
};
ReactDOM.render(
,
document.getElementById（'root'））
);

由于setWord（例如target.value），每次更改时它都会渲染，但您是说额外渲染吗？对于您在输入中键入的每个字母，它会呈现多少次？如果我查看来自kendo grid的文档中的示例，它们会将组件名称传递给filterCell，而您会传递一个函数，将组件返回给filterCell。这取决于GridColumn的实现。您可以将其更改为filterCell={SearchInput}以进行检查，这将消除rerenderhey jelte，对于过滤器单元，要输入props，您需要传递一个带有props参数的函数，但这就是问题所在。谢谢。谢谢这个好答案，但实际的答案是错误的，破解剑道组件。我将函数传递到过滤单元，而不仅仅是componenet。你的意见很有价值，我用额外的状态等纠正了你在这里指出的错误
const SearchInput = React.memo(() => {
  const [word, setWord] = useState('');

  const dispatch = useDispatch();

  const deb = useCallback(
    debounce((text) => dispatch({ type: 'SET_TERM', term: text }), 1000),
    []
  );

  const handleText = (text) => {
    deb(text);
  };
  return (
    <input
      className="searchInput"
      value={word}
      type="search"
      placeholder="Search.."
      onChange={(e) => {
        handleText(e.target.value)
        setWord(e.target.value);
      }}></input>
  );
});

export default SearchInput;

  const searchWord = useSelector((state) => state.search.term);
  const classifications = useSelector((state) => state.search.classifications);
  const date = useSelector((state) => state.search.date);

  useEffect(() => {
    const data = searchDocsByName(searchWord, date, classifications);
    data.then((i) => {
      setDocuments(i.data.data);
      setTotal(i.data.data.length);
    });
  }, [searchWord, date, classifications]);