0

像这样我有一个组件数组需要引用来触发评论组件折叠，所以我需要创建一些引用来引用每个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.

对这种情况有什么想法吗？

4

1 回答 1

0

已修复，只是不触发 ref 中的 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);
于 2020-11-20T04:49:54.823 回答