Javascript 列出每个元素的修改按钮

我有一个React Redux应用程序，它显示了停放在所选停车场的汽车列表，但不是所有的汽车，只有那些具有parked=true属性的汽车

我正在使用API从数据库中修改和获取元素，现在我需要一个PUT请求将每辆车的状态修改为parked=false，并将其从列表中删除。我已经有了PUT函数（我在下面链接了它）

我的问题是函数需要元素的ID，我不知道如何将它传递给函数

这是我的代码（voiture的意思是车）：

这是我在my actions.js中的函数

export const ParkedModifié =(voiture) => ({
    type: VOITURE_MODIFIED,
    voiture
});
//PUT request
export const notParked = (id)=>{
    return(dispatch)=>{
        return requests.put(
            `/voitures/${id}`,
            {
                parked: false
            }
        ).then(response => dispatch(ParkedModifié(response)))
    }
}

这是我的carList.js

        return (

            <div className="card mb-3 mt-3 shadow-sm">
                { voitureList.map(voiture => {
                    return (

                      <div className="card-body border-bottom" key={voiture.id}>
                         <p className="card-text mb-0">
                             {voiture.matricule}
                         </p>
                         <p className="card-text">
                         <small className="text-muted">{timeago().format(voiture.gareele)}</small>
                         </p>

                         <Button color="danger" onClick={this.onSubmit}>Change</Button>
                         </div>         
                    );
                })}
            </div>
        )
    }

返回(
{voitureList.map（voiture=>{
返回(

{voiture.matricule}


{timeago（）.format（voiture.gareele）}

改变
);
})}
)
}

解决方案很多，但非常简单的解决方案就在这里

我假设您的voiture对象有一个名为idso的属性（检查onClick函数）：

返回(
{voitureList.map（voiture=>{
返回(

{voiture.matricule}


{timeago（）.format（voiture.gareele）}

{this.onSubmit（voiture.id）}>Change
);
})}
)
}

---

请随意在评论中提出更多问题。

以下模式是我经常使用的。这样，您就不会每次都传递具有不同引用的函数。在这种情况下，当父组件呈现时，这将导致您的

按钮

组件无偿重新呈现

所以我们在这里要做的是传递

onSubmit

并从内部的“data-”属性中读取

        onSubmit = event => {
           const id = event.currentTarget.getAttribute('data-id')
           // use id however you want
        }


        return (

        <div className="card mb-3 mt-3 shadow-sm">
            { voitureList.map(voiture => {
                return (

                  <div className="card-body border-bottom" key={voiture.id}>
                     <p className="card-text mb-0">
                         {voiture.matricule}
                     </p>
                     <p className="card-text">
                     <small className="text-muted">{timeago().format(voiture.gareele)}</small>
                     </p>

                     <Button 
                        color="danger" 
                        data-id={voiture.id}
                        onClick={this.onSubmit}
                     >
                       Change
                     </Button>
                     </div>         
                );
            })}
        </div>
    )
}

onSubmit=event=>{
const id=event.currentTarget.getAttribute（'data-id'）
//使用你想要的id
}
返回(
{voitureList.map（voiture=>{
返回(

{voiture.matricule}


{timeago（）.format（voiture.gareele）}

改变
);
})}
)
}

奇怪，它给了我

未捕获类型错误：NotParking不是函数

即使我导入了函数并添加了

onSubmit（id）{const{notparking}=this.props；return notparking（id）；}

我添加了

onSubmit=event=>{const id=event.currentTarget.getAttribute（'data-id'））return notParked（id）；}

即使它没有给我一个错误，该值在数据库中仍然没有改变。quick console.log显示它获取id没有任何问题，问题一定在我的函数本身。当然。

        onSubmit = event => {
           const id = event.currentTarget.getAttribute('data-id')
           // use id however you want
        }


        return (

        <div className="card mb-3 mt-3 shadow-sm">
            { voitureList.map(voiture => {
                return (

                  <div className="card-body border-bottom" key={voiture.id}>
                     <p className="card-text mb-0">
                         {voiture.matricule}
                     </p>
                     <p className="card-text">
                     <small className="text-muted">{timeago().format(voiture.gareele)}</small>
                     </p>

                     <Button 
                        color="danger" 
                        data-id={voiture.id}
                        onClick={this.onSubmit}
                     >
                       Change
                     </Button>
                     </div>         
                );
            })}
        </div>
    )
}