Пересылка ссылки в функциональном компоненте с реактив-редуксом (v. 6.0.1) - PullRequest
2 голосов
/ 15 марта 2019

Я пытаюсь использовать 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 ()?

Что я делаю не так?

1 Ответ

4 голосов
/ 15 марта 2019

InfiniteTable подпись неверна, это устаревшее context, которое принимается в качестве второго параметра в функциональных компонентах, а не ref. Чтобы получить объект ref для использования его с useImperativeHandle, компонент должен быть заключен в React.forwardRef.

Как ссылка состояний,

useImperativeHandle настраивает значение экземпляра, которое предоставляется родительским компонентам при использовании ref. Как всегда, в большинстве случаев следует избегать императивного кода с использованием ссылок. useImperativeHandle должен использоваться с forwardRef

Должно быть:

const InfiniteTable = forwardRef((props, ref) => { ... });

export default connect(
  mapStateToProps,
  { fetchData },
  null,
  { forwardRef: true }
)(InfiniteTable);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...