J'ai cet état:
{
about: "about product1"
appStoreUrl: "https://itunes.apple.com/us/app/snapchat/id447188370?mt=8"
name: "p1"
offerPrice: 99.99
photo: "images/products/"
playStoreUrl: "images/products/"
price: 1000
}
{
about: "about product2"
appStoreUrl: "https://itunes.apple.com/us/app/snapchat/id447188370?mt=8"
name: "p2"
offerPrice: 99.99
photo: "images/products/"
playStoreUrl: "images/products/"
price: 2000
}
ce que je veux: formulaire de mise à jour à l'intérieur du modal Je l'ai utilisé pour mettre à jour les produits. J'ai utilisé de nouveaux accessoires dans componentWillReceiveProps
J'ai fait:
componentWillReceiveProps(nextProps){
let Updateproduct = nextProps.productlist.productlist.Products;
Updateproduct.map((item,i) => {
let formdata = Object.assign({}, this.state.formdata);
formdata.name = item.name
formdata.about = item.about
formdata.price = item.price
formdata.offerPrice = item.offerPrice
formdata.playStoreUrl = item.playStoreUrl
formdata.appStoreUrl = item.appStoreUrl
formdata.photo = item.photo
console.log(formdata)
this.setState({formdata})
})
}
MyProblem: cela a rempli les objets mais dans le formulaire à l'intérieur du modal seulement j'ai vu le dernier produit pas tout en modal lorsque vous cliquez pour mettre à jour un produit. Remarque:
Updateproduct contient:
state = {
formdata:{
name: null,
about: null,
price: null,
offerPrice:null,
playStoreUrl:null,
appStoreUrl:null ,
photo:null,
}
}
3 Réponses :
Je pense que c'est parce que votre appel setState () est au mauvais endroit (et un seul objet à la fois):
let data =[];
UpdateProduct.map((item, i) => {
let formdata = null;
// do your formdata stuff but append it as part of an array
data.push(formdata);
});
this.setState({ formdata: data });
Ensuite, je pense qu'il devrait obtenir tous les produits. p>
il ne m'a pas donné de données de forme non définies
Vous définissez votre état sur la carte. Si vous considérez la carte comme une boucle, cela signifie que vous la remplacez à chaque itération. Ainsi, vous n'aurez jamais que le dernier affiché.
alors quelle est la solution que vous proposez
Le problème est que vous souhaitez stocker un seul article de produit spécifique sur lequel l'utilisateur a cliqué dans une variable d'état, mais avec le code actuel, vous stockez toujours le dernier article de produit. De plus, setState en boucle n'est pas un bon moyen.
Pour résoudre le problème, stockez le détail du produit cliqué dans l'état dans la fonction de gestionnaire onClick uniquement, au lieu de la méthode componentWillReceiveProps . Pour cela, vous devez lier l'identifiant du produit avec la fonction onClick.
Comme ceci:
onClick={this.getProductId.bind(this, item.id)}
// click handler function
getProductId = (id) => {
let productObj = {};
let Updateproduct = this.props.productlist.productlist.Products;
Updateproduct.forEach((item,i) => {
if(item.id == id) {
productObj = {
name: item.name,
about: item.about,
price: item.price,
offerPrice: item.offerPrice,
playStoreUrl: item.playStoreUrl,
appStoreUrl: item.appStoreUrl,
photo: item.photo
};
this.setState({ formdata: productObj, id: id })
}
})
}
dans l'état, vous gérez un seul objet (un produit), il doit s'agir d'un tableau dans le cas de plusieurs produits, et vous ne voyez que le dernier produit car à la fin, vous enregistrez les derniers détails du produit dans l'état.
il doit être un tableau en cas de multiple? Qu'est-ce que c'est
c'est un objet:
formdata: {...}, il devrait être:formdata: [{...}]le même problème un produit répété
pouvez-vous montrer le code de mise à jour, ce que vous avez essayé?
je viens de modifier comme vous l'avez suggéré ... laissez Updateproduct = nextProps.productlist.productlist.Products; Updateproduct.map ((item, i) => {let formdata = Object.assign ({}, this.state.formdata); formdata.name = item.name formdata.about = item.about formdata.price = item.price formdata.offerPrice = item.offerPrice formdata.playStoreUrl = item.playStoreUrl formdata.appStoreUrl = item.appStoreUrl formdata.photo = item.photo // console.log (formdata) this.setState ({formdata})}) @Mayank Shukla