Javascript 警告：React无法识别DOM元素上的'pId'属性

当我对下面给出的span标记进行注释时，它不会显示任何警告

<span onClick={onCommentClick} className={'comment'}>
                        <AiOutlineComment className={"i"} size={"20px"}/> Comment
                    </span>

但我还没有通过任何像pId这样的道具。它在说什么

import React, {useEffect, useState} from 'react'
import {AiOutlineDislike, AiOutlineLike, AiFillCaretDown, AiFillDelete, AiOutlineComment} from "react-icons/all";
import {like, unlike} from "../../redux/post/postActions";
import {connect, useSelector} from "react-redux";
import {deletePost} from '../../redux/post/postActions'
import Moment from 'react-moment'
import {fetchProfile} from "../../redux/profile/profileActions";
import CommentForm from "./comments/CommentForm";
import Comments from "./comments/Comments";

const Posts = ({post, like, unlike, deletePost, fetchProfile}) => {
    useEffect(() => {
        fetchProfile();
    }, [fetchProfile]);
    const {auth, profile} = useSelector(state=>state)
    const onLike = (e, id) => {
        // e.preventDefault()
        like(id)
    }

    const onUnlike = (e, id) => {
        // e.preventDefault()
        unlike(id)
    }

    const [boxDropdown, setBoxDropdown] = useState(false)

    const onClick = () => {
        setBoxDropdown(!boxDropdown)
    }

    const delPost = (e,id) => {
        e.preventDefault()
        deletePost(id)
    }

    const [showComment, setShowComment] = useState(false)

    const onCommentClick = () => {
        setShowComment(!showComment)
    }

    return (
        <div className="posts">
            <div className="box-header">
                <AiFillCaretDown onClick={onClick} className={"i dropdown-i"} size={"20px"}/>
                {
                    boxDropdown &&
                    <div className={"box-dropdown"}>
                        <ul>
                            {
                                auth.user._id === post.user &&
                                <li onClick={(e)=>delPost(e, post._id)}><AiFillDelete className={"i"} size={"20px"}/>Delete</li>
                            }
                        </ul>
                    </div>
                }
                <img className={"small-image"} src={profile.profile.image !== null
                && profile.profile.image !== undefined
                && profile.profile.image !== ""
                && post.user === auth.user._id
                    ?
                    profile.profile.image
                    :`${post.avatar}`} alt="avatar"/>
                <div>
                    <h5>{post.name}</h5>
                    <span><Moment fromNow>{post.date}</Moment></span>
                </div>
            </div>
            <p>{post.text}</p>
            <div className="box-footer">
                    <span onClick={(e)=>onLike(e, post._id)} className={"like"}>
                        <AiOutlineLike className={"i"} size={"20px"}/> {post.likes.length}
                    </span>
                <span onClick={(e)=>onUnlike(e, post._id)} className={"dislike"}>
                        <AiOutlineDislike className={"i"} size={"20px"}/> {post.unlikes.length}
                    </span>
                <span onClick={onCommentClick} className={'comment'}>
                        <AiOutlineComment className={"i"} size={"20px"}/> Comment
                    </span>
            </div>

            {/*<CommentForm post={post} showComment={showComment} />*/}
            <Comments />
        </div>
    )
}

export default connect(null, {like, unlike, deletePost, fetchProfile})(Posts)

import React，{useffect，useState}来自“React”
从“react icons/all”导入{AiOutlineDislike、AiOutlineLike、AiFillCaretDown、AiFillDelete、AiOutlineComment}；
从“./../redux/post/postActions”导入{like，inspective}”；
从“react-redux”导入{connect，useSelector}；
从“../redux/post/postActions”导入{deletePost}
从“反应时刻”导入时刻
从“../../redux/profile/profileActions”导入{fetchProfile}”；
从“/comments/CommentForm”导入CommentForm；
从“/Comments/Comments”导入注释；
const Posts=（{post，like，inspect，deletePost，fetchProfile}）=>{
useffect（（）=>{
fetchProfile（）；
}，[fetchProfile]）；
const{auth，profile}=useSelector（state=>state）
const onLike=（e，id）=>{
//e.预防违约（）
like（id）
}
const onUnlike=（e，id）=>{
//e.预防违约（）
不同于（id）
}
const[boxDropdown，setBoxDropdown]=useState（false）
const onClick=（）=>{
setBoxDropdown（！boxDropdown）
}
常量delPost=（e，id）=>{
e、 预防默认值（）
deletePost（id）
}
const[showcoment，setshowcoment]=useState（false）
const onCommentClick=（）=>{
setShowComment（！showComment）
}
返回(
{
盒子下拉列表&&

{
auth.user.\u id==post.user&&
delPost（e，post.\u id）}>Delete
}

}
{post.name}
{发布日期}
{post.text}

onLike（e，post.\u id）}className={“like”}>
{post.likes.length}
onUnlike（e，post.\u id）}className={“厌恶”}>
{post.unlikes.length}
评论
{/**/}
)
}
导出默认连接（null，{like，inspect，deletePost，fetchProfile}）（Posts）

这是因为

react icons

中的

Ai

图标导致的。我使用其他图标（如

Fa

图标）修复了此问题。从Github中查看这个

例如：

---

这显然是react图标库中的一个问题。

import React, {useEffect, useState} from 'react'
import {AiOutlineDislike, AiOutlineLike, AiFillCaretDown, AiFillDelete, AiOutlineComment} from "react-icons/all";
import {like, unlike} from "../../redux/post/postActions";
import {connect, useSelector} from "react-redux";
import {deletePost} from '../../redux/post/postActions'
import Moment from 'react-moment'
import {fetchProfile} from "../../redux/profile/profileActions";
import CommentForm from "./comments/CommentForm";
import Comments from "./comments/Comments";

const Posts = ({post, like, unlike, deletePost, fetchProfile}) => {
    useEffect(() => {
        fetchProfile();
    }, [fetchProfile]);
    const {auth, profile} = useSelector(state=>state)
    const onLike = (e, id) => {
        // e.preventDefault()
        like(id)
    }

    const onUnlike = (e, id) => {
        // e.preventDefault()
        unlike(id)
    }

    const [boxDropdown, setBoxDropdown] = useState(false)

    const onClick = () => {
        setBoxDropdown(!boxDropdown)
    }

    const delPost = (e,id) => {
        e.preventDefault()
        deletePost(id)
    }

    const [showComment, setShowComment] = useState(false)

    const onCommentClick = () => {
        setShowComment(!showComment)
    }

    return (
        <div className="posts">
            <div className="box-header">
                <AiFillCaretDown onClick={onClick} className={"i dropdown-i"} size={"20px"}/>
                {
                    boxDropdown &&
                    <div className={"box-dropdown"}>
                        <ul>
                            {
                                auth.user._id === post.user &&
                                <li onClick={(e)=>delPost(e, post._id)}><AiFillDelete className={"i"} size={"20px"}/>Delete</li>
                            }
                        </ul>
                    </div>
                }
                <img className={"small-image"} src={profile.profile.image !== null
                && profile.profile.image !== undefined
                && profile.profile.image !== ""
                && post.user === auth.user._id
                    ?
                    profile.profile.image
                    :`${post.avatar}`} alt="avatar"/>
                <div>
                    <h5>{post.name}</h5>
                    <span><Moment fromNow>{post.date}</Moment></span>
                </div>
            </div>
            <p>{post.text}</p>
            <div className="box-footer">
                    <span onClick={(e)=>onLike(e, post._id)} className={"like"}>
                        <AiOutlineLike className={"i"} size={"20px"}/> {post.likes.length}
                    </span>
                <span onClick={(e)=>onUnlike(e, post._id)} className={"dislike"}>
                        <AiOutlineDislike className={"i"} size={"20px"}/> {post.unlikes.length}
                    </span>
                <span onClick={onCommentClick} className={'comment'}>
                        <AiOutlineComment className={"i"} size={"20px"}/> Comment
                    </span>
            </div>

            {/*<CommentForm post={post} showComment={showComment} />*/}
            <Comments />
        </div>
    )
}

export default connect(null, {like, unlike, deletePost, fetchProfile})(Posts)