Question

我在渲染注释组件时遇到麻烦。

所以我有一个listComment组件，它有2个子组件CommentItem和CommentGroup。

我的CommentGroup组件就像一个下拉列表，您可以在其中打开和关闭它。

我尝试使用React.memo（），但它仍会渲染已渲染的子对象

我的问题是，每次添加新评论时，它都会再次渲染已经渲染的子组件。因此，已经打开的CommentGroup注释将关闭。我使用redux进行状态管理。

对不起，英语不好。

评论数据

[{
body: "comment 1",
comment_counter: 0,
createdAt: "2020-06-14T13:42:38.465Z",
heart_counter: 0,
ownerId: "5edce08cabc7ab1860c7bdf4",
postId: "5ee3770495bfce029842bc68",
_id: "5ee6294eb7295a1c04b62374"
}, {
body: "comment 2",
comment_counter: 0,
createdAt: "2020-06-14T13:42:38.465Z",
heart_counter: 0,
ownerId: "5edce08cabc7ab1860c7bdf4",
postId: "5ee3770495bfce029842bc68",
_id: "5ee6294eb7295a1c04b62374"
}]

ListComments.js

const comments = useSelector(state => state.comment.comments)

return comments.map(comment => {
        return (
            <div key={comment._id}>
                <CommentItem comment={comment} type="post_comment" />
                <div className={classes.mLeft}>
                    <CommentGroup counter={comment.comment_counter} />
                </div>
            </div >
        )
    })

CommentGroup.js

const CommentGroup = React.memo((props) => {
const [open, setOpen] = useState(false)

const onOpen = () => {
    setOpen(true)
}

const onClose = () => {
    setOpen(false)
}

return (
    <div>
        <Button
            size="small"
            color="primary"
            startIcon={
                !open ? <ArrowDropDownOutlinedIcon /> : <ArrowDropUpOutlinedIcon />
            }
            onClick={
                !open ? () => onOpen() : () => onClose()
            }
        >
            {!open ? 'View' : 'Hide'} {1} Replies
        </Button>
        CommentGroupOpen: {open ? 'true' : 'false'}
    </div>
)
}, (prevProps, nextProps) => {
 console.log(prevProps) // not getting called
 if (prevProps.counter !== nextProps.counter) {
    return false
 }
 return true
})

export default CommentGroup

CommentItem 只是显示组件

Answer 1

这很可能是因为所有注释都具有相同的comment._id（用作键）。我做了一个类似的例子，它工作正常。 https://codesandbox.io/s/mutable-framework-stk5g

反应备忘录子组件渲染

1 个答案: