.map函数内的子组件显示所有子实例[重复]

Posted 2023-02-22

【中文标题】.map函数内的子组件显示所有子实例[重复]

【英文标题】：Child component inside .map function display all children instances [duplicate]

【发布时间】：2020-04-19 10:34:29

【问题描述】：

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

我有两个主要组成部分：

HRdashboard 是列出所有职位空缺的父组件。

MyOpeningCard是包含单个职位空缺信息的卡片。来自父组件中的.map函数：

人力资源仪表盘

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。 为什么会这样？

【问题讨论】：

应该是回调，即onClick=() => console.log(opening.id)

这能回答你的问题吗？ React onClick function fires on render

【参考方案1】：

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

onClick=console.log(opening.id)

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

您应该将回调传递给 onClick 属性，该属性仅在点击发生时执行。

改成

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

【参考方案2】：

函数名后的括号执行函数。 即使你不是故意的，这就是为什么需要用一个额外的箭头函数来包装它，它发生在：

() => console.log('something')，在实际点击之前不会调用此箭头函数。

如果您以这种方式传递console.log - 没有括号-，它将仅在发生 Click 事件时记录整个 Event。