Question

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

我有两个主要组成部分：

HRdashboard是列出所有职位空缺的父级组件。
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>
)

}

MyOpeningCard

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>
    )

}

我的问题：

如果我在子组件中单击Click Here，则会触发console.log(opening.id)。我原本希望在控制台中看到我单击的职位空缺的opening.id。但是，我看到了所有开口的ID。为什么会这样？

Answer 1

因为您的onClick道具正在调用一个函数，该函数在呈现子组件的同时立即运行，而无需单击所有子组件。

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

因此，当您使用.map()方法时，所有<MyOpeningCard />组件都会被渲染，每个组件立即一次又一次地调用console.log()，因此您会看到所有{{1 }}登录控制台。

您应该将回调传递给id道具，该道具只有在发生点击时才会执行。

将其更改为

onClick

Answer 2

在函数名称执行函数后进行括号。即使您不是要这样做的，这就是为什么需要使用附加的箭头功能包装它的原因，它的发生方式是：

() => console.log('something')，在实际发生点击之前，将不会调用此箭头功能。

如果您以这种方式传递console.log（没有括号），则只会在发生Click事件时记录整个Event。

.map函数内的子组件显示所有子实例

2 个答案: