带有每个元素的修改按钮的列表答案

【问题标题】：List with modification button for each element带有每个元素的修改按钮的列表
【发布时间】：2019-10-29 18:22:17
【问题描述】：

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

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

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

这是我的代码（voiture 表示汽车）：

这是我的 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>
        )
    }

【问题讨论】：

标签： javascript reactjs react-redux

【解决方案1】：

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

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

        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={e=>{this.onSubmit(voiture.id)}}>Change</Button>
                     </div>         
                );
            })}
        </div>
    )
}

欢迎在评论中提出更多问题。

【讨论】：

奇怪，它给了我Uncaught TypeError: notParked is not a function，即使我导入了函数并添加了onSubmit(id){ const {notParked}= this.props; return notParked(id); }

【解决方案2】：

以下模式是我一直使用的。这样，您就不会每次都传递具有不同引用的函数。在这种情况下，这将导致您的 Button 组件在此父组件渲染时重新渲染。

所以我们这里要做的是传递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') return notParked(id); }，尽管它没有给我错误，但数据库中的值仍然没有改变
一个快速的console.log显示它获取id没有任何问题，问题一定出在我的函数本身
是的。明确地。