Question

我有一个React Redux应用程序，其中显示了选定停车场中停放的汽车的列表，但不是所有的汽车，仅显示了具有称为parked = true的属性的那些汽车。

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

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

这是我的代码（汽车是汽车）：

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

Answer 1

以下是我经常使用的模式。这样，您不会每次都传递具有不同引用的函数。在这种情况下，每当父组件呈现时，这将导致import numpy as np import cv2 from PIL import Image im = cv2.imread('binary_image.png', 0) original = cv2.imread('original.jpg') cnts, hierarcy = cv2.findContours(im,cv2.RETR_EXTERNAL,cv2.CHAIN_APPROX_SIMPLE) i = 0 for cnt in cnts: test = np.zeros(im.shape) cv2.drawContours(test, cnts, i, (255,255,255), 3) x, y, w, h = cv2.boundingRect(cnt) img_close_var = max(w,h) + 10 se = np.ones((img_close_var,img_close_var), dtype='uint8') mask = cv2.morphologyEx(test, cv2.MORPH_CLOSE, se) mask = mask.astype(np.uint8) output = cv2.bitwise_and(original, original, mask = mask) cv2.imwrite(str(i) + '.png',output) i = i + 1组件不进行任何重新呈现。

所以我们在这里要做的是传递Button并从其中的'data-'属性读取。

onSubmit

Answer 2

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

我假设您的 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>
    )
}

随时可以在评论中提出更多问题。

列出每个元素的修改按钮

2 个答案: