内部的子组件。映射函数显示所有子实例[重复]

Question

我正在建立一个网站，允许用户创建一个职位空缺，分配给它不同的要求，并删除它。

我有两个主要部分：

>

hr仪表板是列出所有职位空缺的父组件。

MyOpeningCard是包含单个作业打开信息的卡片。它来自父组件中的. map函数：

hr仪表板

function HRdashboard({changeAuthLoginHR}) {
const [HRuser, setHRuser] = React.useState([]);
const [openings, setOpenings] = React.useState([]);

useEffect( ()=> {

    let unmountedOpenings = false
    async function getAllOpenings(){
        let response = await  axios("http://www.localhost:3000/api/v1/openings");
        if(!unmountedOpenings)
            setOpenings(response.data)
    }

    let jwt = window.localStorage.getItem('jwt')
    let result = jwtDecode(jwt)
    setHRuser(result)
    changeAuthLoginHR()
    getAllOpenings()
    return () => {
        unmountedOpenings = true
    }
    }, [],
)


return(
    <div>
        <Container style={{marginTop: "50px"}}>
            <Row>
                    {openings.map(opening =>
                        <Col>
                            <MyOpeningCard key={opening.id} opening={opening} /> # Here is where the child is
                        </Col>
                    )}
            </Row>
        </Container>
    </div>
)

}

明信片

function MyOpeningCard({opening}) {

    return(

        <div>
            <Card style={{ width: '18rem', marginTop: "15px"}}>
                <Card.Body>
                    <Card.Title>{opening.title}</Card.Title>
                    <Card.Subtitle className="mb-2 text-muted">Requirements: </Card.Subtitle>
                    <Card.Text>
                        {opening.requirements[0].requirements.map(requirement => <li>{requirement}</li>)}
                    </Card.Text>
                    <div>
                    <Card.Link href="#" onClick={console.log(opening.id)}>Click Here</Card.Link> # If I click here, it console.log all the IDs, not only this opening id.
                    </div>
                </Card.Body>
            </Card>
        </div>
    )

}

我的问题：

如果我在我的子组件中单击单击此处，它将触发控制台。日志（opening.id）。我希望在控制台中只看到打开。我单击的空缺职位的id。但是，我看到了所有开口的ID。为什么会这样？

Answer 1

函数名后的括号用于执行函数。尽管您并非有意这样做，但这就是为什么需要使用额外的箭头函数对其进行包装，其发生方式如下：

（）=

而如果您通过控制台。日志以这种方式记录（无括号），它将仅在单击事件发生时记录整个事件。

Answer 2

因为您的on点击道具正在调用一个函数，该函数在呈现您的子组件的同时立即运行，甚至没有点击所有子组件。

onClick={console.log(opening.id)}

因此，当您使用时。map（）方法，所有

相反，您应该将回调传递给on点击道具，该道具仅在单击发生时执行。

把它改成

onClick={() => { console.log(opening.id) }}