reactjs createRef не работает в массивах компонентов

Question

Например , у меня есть массив компонентов, которым требуется ref для запуска коллапса компонента комментария, поэтому мне нужно создать несколько ссылок для ссылки на каждый commentListItem, но это не работает, как мне это сделать?

import React, { useRef, createRef } from "react";
import PropTypes from "prop-types";
import { map, isArray } from "lodash/fp";
import Divider from "@material-ui/core/Divider";
import CommentListItem from "./CommentListItem";
import CommentCollapse from "./CommentCollapse";

function CommentList({ list = [], ...props }) {
  const { count = 0 } = props;
  const refList = map((o) => {
    /* o.ref = createRef(null); */
    return o;
  })(list);

  const onShow = () => {
    console.log(refList);
  };

  return (
    <div className="ke-comment-list">
      {map.convert({ cap: false })((o, i) => (
        <div key={i} className="ke-comment-list-item">
          <CommentListItem listItem={o} onShow={onShow} />
          {isArray(o.child) && o.child.length ? (
            <CommentCollapse {...o}>
              <CommentList list={o.child} count={count + 1} />
            </CommentCollapse>
          ) : null}
          {count > 0 && list.length - 1 === i ? null : <Divider />}
        </div>
      ))(refList)}
    </div>
  );
}

CommentList.propTypes = {
  list: PropTypes.arrayOf(PropTypes.object).isRequired,
};

export default CommentList;

есть компонент CommentCollapse для отображения или скрытия подкомментария.

import React, { useState, forwardRef, useImperativeHandle } from "react";
import ButtonBase from "@material-ui/core/ButtonBase";
import Collapse from "@material-ui/core/Collapse";

const CommentCollapse = ({ children }, ref) => {
  const [show, setShow] = useState(false);

  const showMore = () => {
    setShow((prev) => !prev);
  };

  const collapseText = () => (show ? "收起" : "展开");

  useImperativeHandle(ref, () => ({
    showMore: showMore()
  }));

  return (
    <div className="ke-comment-list-children">
      <Collapse in={show}>{children}</Collapse>
      <ButtonBase size="small" onClick={showMore}>
        {collapseText()}
      </ButtonBase>
    </div>
  );
};

export default forwardRef(CommentCollapse);

ловить ошибки

Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

есть идеи для этой ситуации?

Answer 1

Исправлено , просто не запускать функцию showMore в исх.

import React, { useState, forwardRef, useImperativeHandle } from "react";
import ButtonBase from "@material-ui/core/ButtonBase";
import Collapse from "@material-ui/core/Collapse";

const CommentCollapse = ({ children }, ref) => {
  const [show, setShow] = useState(false);

  const showMore = () => {
    setShow((prev) => !prev);
  };

  const collapseText = () => (show ? "收起" : "展开");

  useImperativeHandle(ref, () => ({
    showMore
  }));

  return (
    <div className="ke-comment-list-children">
      <Collapse in={show}>{children}</Collapse>
      <ButtonBase size="small" onClick={showMore}>
        {collapseText()}
      </ButtonBase>
    </div>
  );
};

export default forwardRef(CommentCollapse);