React.MEMO()无法在KendoReact中使用其内部的钩子(可能使用Dispatch)

Question

我在剑道网格中有一个子过滤器输入组件，我的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>}
/>

现在，当我在该组件中添加一些输入时，它会将值传递给名为word的状态，500毫秒后，它会触发去抖动并将其解析为名为"的redux状态；术语"；

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;

现在，每当redux状态发生变化时，它都会触发剑道网格内部的useEffect，并从API获取新数据。

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]);

那么问题出在哪里呢？SearchInput组件重新发送，即使它在React.memo((内部，并且从探查器中我得到了呈现的SearchInput，因为"；换钩"；。

我完全被卡住了，我不知道该怎么做。

Answer 1

如果不必要地使用const [word, setWord] = useState('');设置本地状态，setWord将重新呈现组件，因为本地状态已更改。您可以使输入成为不受控制的组件

这里有一个你可以做的例子：

const { Provider, useDispatch } = ReactRedux;
const { createStore, applyMiddleware, compose } = Redux;
const { useCallback } = React;
const initialState = {};
const reducer = (state, { type, term }) => {
console.log('in reducer', type, term);
return state;
};
//creating store with redux dev tools
const composeEnhancers =
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
reducer,
initialState,
composeEnhancers(
applyMiddleware(
() => (next) => (action) => next(action)
)
)
);
const debounce = (fn, time) => {
let timer;
return (...args) => {
clearTimeout(timer);
timer = setTimeout(() => fn(...args), time);
};
};
const SearchInput = React.memo(function SearchInput() {
console.log('rendering SearchInput');
const dispatch = useDispatch();
const deb = useCallback(
debounce(
(text) => dispatch({ type: 'SET_TERM', term: text }),
1000
),
[]
);
return (
<input
className="searchInput"
type="search"
placeholder="Search.."
onChange={(e) => {
deb(e.target.value);
}}
></input>
);
});
const App = () => {
return <SearchInput />;
};
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.5/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/7.2.0/react-redux.min.js"></script>
<div id="root"></div>