Я пытаюсь использовать forwardRef
в своем функциональном компоненте, который также использует react-redux
.Мой компонент выглядит следующим образом:
const InfiniteTable = ({
columns,
url,
data,
stateKey,
loading,
loadMore,
fetchData,
customRecordParams,
...rest
}, ref) => {
const [start, setStart] = useState(0);
const tableRef = React.createRef();
console.log(rest);
let dataSource = data;
if (customRecordParams) dataSource = _.map(dataSource, customRecordParams);
if (dataSource.length > FETCH_LIMIT)
dataSource = _.slice(dataSource, 0, start + FETCH_LIMIT);
useEffect(() => setupScroll(setStart, tableRef), []);
useEffect(() => {
if (loadMore) fetchData(url, stateKey, { start });
}, [start, loadMore]);
useImperativeHandle(ref, () => ({
handleSearch: term => console.log(term),
handleReset: () => console.log("reset")
}));
return (
<Table
columns={columns}
dataSource={dataSource}
pagination={false}
showHeader
loading={loading}
/>
);
};
const mapStateToProps = (state, ownProps) => ({
data: Object.values(state[ownProps.stateKey].data),
loading: state[ownProps.stateKey].isFetching,
loadMore: state[ownProps.stateKey].loadMore
});
export default connect(
mapStateToProps,
{ fetchData },
null,
{ forwardRef: true }
)(InfiniteTable);
Однако я получаю эту ошибку при попытке использовать мой компонент с опорой ref:
Предупреждение: Компонентам функций нельзя давать ссылки,Попытки получить доступ к этой ссылке не удастся.Вы хотели использовать React.forwardRef ()?
Что я делаю не так?