Reactjs 觸發 onClick function 無點擊功能組件

Question

我在 react js 中使用功能組件，我的 onClick function 觸發組件渲染而無需單擊我的 li 元素； 這是我的父組件，將 handleCallDetails function 作為道具傳遞給子組件：

export default function Cartable(){

    const [items , setItems] = useState(null);
    const [details , setDetails] = useState(null);



    function handleCallDetails(id){
        if(items !== null && details === null){
            let d = items.find(x => {
                return x.id === id;
            });

        }
    }

    useEffect(() => {
        axios.get(`/workflows/${mode}` ,{
            params : {
                OrganizationId : "FE905B40-DA6E-4A81-8A4F-B447AA6B0EA3" , 
                Type : 2 ,
                sortorder : "desc" ,
                pageIndedx : 1 , 
                pageSize : 10
            }
        }).then(response => {
            // console.log('response : ***************** ' , response);
            setItems(response.data.data);
        }).catch(error => {
            console.log('error : ****************** ' , error);
        });
    } , [mode]);

     
   
    return (
        <Grid container spacing={2}>
            <Grid item xs={12} sm={4} md={3}>
                <div className="drt_RightSide drt_segment">
                    <h4 className="drt_RightSideTitle">
                        <i className="far fa-inbox"></i>
                        کارتابل
                    </h4>
                    <ul>
                        {/* <li>
                            <i class="far fa-inbox"></i>
                            <span>درخواست ها</span>
                        </li> */}
                        <li onClick={() => {setMode('pending');}}>
                            <i className="fas fa-exclamation"></i>
                            <span><FormattedMessage id="CARTABLE_PENDING" /></span>
                            <span className="drt_badge_warning drt_NotifNum">5</span>
                        </li>
                        <li onClick={() => {setMode('approved');}}>
                            <i className="far fa-check"></i>
                            <span>تایید شده</span>
                        </li>
                        <li onClick={() => {setMode('rejected');}}>
                            <i className="far fa-times"></i>
                            <span>رد شده</span>
                            <span className="drt_badge_error drt_NotifNum">7</span>
                        </li>
                        <li>
                            <i className="far fa-bell"></i>
                            <span>خارج از فرآیند</span>
                        </li>
                    </ul>
                </div>
            </Grid>
            <Grid item xs={12} sm={8} md={9}>
                <div className="drt_LeftSide drt_segment">                 */}
                        
                    {/* cartbale list */}
                    <CartableList
                        items={items}
                        callDetails={handleCallDetails}/>

                </div>
            </Grid>
        </Grid>
    );

}

我的孩子使用了名為 callDetails 的 onClick function ：

export default function CartableList(props){

    const [showbox , setShowbox] = useState(false);
    const [age, setAge] = useState('');

    const handleChange = (event) => {
        setAge(event.target.value);
    };

    function handleFilterBox(){
        setShowbox(!showbox);
    }


    return (
        <Fragment>
            
            {/* cartable list */}
            <div style={{direction : "ltr"}}>
                <Scrollbars style={{ height: 400 }}>

                    {
                        props.items && props.items !== undefined ?
                            props.items.map(function(item , index){
                                
                                return (
                                    <div className="drt_clearfix drt_CartableItem" key={index} onClick={(props.callDetails)(item.id)}>
                                        {/* <div className={clsx(drt_ItemStar , item.star ? drt_IsStared : '')}>
                                            <span><i className={clsx(item.star ? "fas fa-star" : "fal fa-star")}></i></span>
                                        </div> */}
                                        <div className="drt_ItemImg">
                                            <span>
                                                <img alt={userImg} src={item.pictureUrl !== undefined && item.pictureUrl !== null ? item.image : userImg} />
                                            </span>
                                        </div>
                                        <div className={clsx("drt_ItemName" , !item.isSeen ? "drt_IsNotSeen" : '')}>
                                            {item.issuerFirstName}
                                            <br />
                                            {item.issuerLastname}
                                        </div>
                                        <div className="drt_ItemIcon">
                                            <Tooltip title={(props.moduleType)(item.type).name}>
                                                <span className={item.isSeen ? "drt_badge_default" : "drt_badge_primary"}>
                                                    <i className={(props.moduleType)(item.type).icon} />
                                                </span>
                                            </Tooltip>
                                        </div>
                                        <div className={clsx("drt_ItemDesc" , !item.isSeen ? "drt_IsNotSeen" : '')}>
                                            {item.objectTitle}
                                        </div>
                                        <div className="drt_ItemStatus">
                                            <span className={(props.stateClass)(item.status)}>
                                                {(props.stateTitle)(item.status)}
                                            </span>
                                        </div>
                                        <div className={clsx("drt_ItemDate" , !item.isSeen ? "drt_IsNotSeen" : '')}>
                                            <p>
                                                <span>
                                                    {item.issuerTime}
                                                </span>
                                                <span>
                                                    {item.issuerDate}
                                                </span>
                                            </p>
                                            <i className="fal fa-clock" />
                                        </div>
                                    </div>
                                );
                            }) : ''
                    }
                    
                </Scrollbars>
            </div>
        </Fragment>
    );

}

請幫我解決這個問題，無需將我的功能組件轉換為 class 組件並綁定我的 function

Answer 1

正確的做法是這樣的。 您需要使用箭頭 function 否則反應會明白您要在加載時執行 function

錯誤的

<div className="drt_clearfix drt_CartableItem" key={index} onClick={(props.callDetails)(item.id)}>

正確的

<div className="drt_clearfix drt_CartableItem" key={index} onClick={() => props.callDetails(item.id)}>

Answer 2

從改變

onClick={() => {setMode('rejected');}}

至

onClick={() => setMode('rejected')}

還

<div className="drt_clearfix drt_CartableItem" key={index} onClick={() => props.callDetails(item.id)}>

但是你在哪里定義了const [mode, setMode] state

Answer 3

似乎您在根據您的代碼呈現時立即執行您的回調 function：

onClick={(props.callDetails)(item.id)}

它應該是：

onClick={() => props.callDetails(item.id)}

是這個問題嗎？

Answer 4

這主要是因為您的子組件中有一段代碼onClick={(props.callDetails)(item.id)} 。 這段代碼實際上是在執行 callDetails function 並立即傳遞 item.id 值。 處理此問題的一種方法是包裝您的 function。

onClick={() => {props.callDetails(item.id)}}

為什么onClick在包裝時不被調用的一個簡單原因是因為它在初始化時沒有直接傳遞任何值。