首页 > 解决方案 > 是否有在数组中查找 json 对象的当前索引的函数?

问题描述

在 onClick 我想记住 localStorage 中的名称,但我不知道如何将数组中的正确对象作为参数发送

myFunction(value){
    console.log(value)
    localStorage.setItem('name', value)
}

render() {
    var { isLoaded, items} = this.state;

    if (!isLoaded){
        return <div>Loading...</div>
    }else {
        return (
            <Container>

                <Jumbotron>
                    <h1 align="center">The Clinicum</h1>
                </Jumbotron>



                <Row>
                    {items.map(row =>(
                        <Col  key={row.iddoctor}>
                            <Image src= {require(`./photos/${row.photoLink}.jpg`)} 
                             roundedCircle onClick={() 
                             => this.myFunction(this.state.items.name)} />
                        </Col>
                    ))}
                </Row>

如果我使用this.state.items,console.log会正确返回洞json,所以其他一切工作正常,也许是一个愚蠢的问题,但我在js中很菜鸟,我找不到答案

标签: javascriptreactjs

解决方案


如果我理解正确,您希望将name与单击的项目对应的项目的 保存到localStorage.

实现这一目标的一种方法是修改您的渲染代码,如下所示:

<Row>
    {items.map((row) =>(
        <Col  key={row.iddoctor}>
            <Image src= {require(`./photos/${row.photoLink}.jpg`)} 
                roundedCircle onClick={() => this.myFunction(row.name)} />
        </Col>
    ))}
</Row>

您还可以row通过传递给映射回调的第二个参数访问当前正在呈现的项目的索引:

<Row>
    {items.map((row, rowIndex) =>(
        <Col  key={row.iddoctor}>
            <Image src= {require(`./photos/${row.photoLink}.jpg`)} 
                roundedCircle onClick={() => this.myFunction(this.state.items[rowIndex].name)} />
        </Col>
    ))}
</Row>

希望这些指点有所帮助!


推荐阅读