J'ai donc un chariot dans lequel la quantité des éléments ajoutés est incrémentée de manière dynamique de +1 chaque fois que vous ajoutez le même élément, et dans le panier lui-même, la quantité d'un élément ajouté peut être modifiée manuellement par n'importe quel numéro d'utilisateur préféré. .
Si j'utilise l'attribut Comment puis-je les deux Montrez la valeur dynamique correctement et être en mesure de mettre à jour le champ de valeur selon vos besoins? Mon code est comme suit: p> p> valeur = "" code> dans le champ Entrée, la valeur est mise à jour de manière dynamique correctement, mais ne me permet pas de changer manuellement la valeur. Et si j'utilise defaultvalue = "" code> la valeur ne se met pas à jour correctement chaque fois qu'un élément est ajouté, mais me permet de chonner manuellement la valeur requise. P>
class CartItem2 extends Component {
constructor(props) {
super(props);
}
handleChange = e => {
const { name, type, value } = e.target;
const val = type === 'number' ? parseFloat(value) : value;
this.setState(() => { return { [name]: val }});
};
updateCartItem = async (e, updateCartItemMutation) => {
e.preventDefault();
console.log('Updating Cart Item!!');
console.log(this.state);
const res = await updateCartItemMutation({
variables: {
id: this.props.cartItem.id,
quantity: this.state.quantity,
},
});
console.log('Updated!!');
};
static getDerivedStateFromProps(nextProps, prevState){
if (nextProps.cartItem.quantity !== prevState.quantity) {
console.log("nextProps ", nextProps);
console.log("prevState", prevState);
return {quantity: nextProps.cartItem.quantity};
}
else return null;
}
render() {
const { cartItem, client } = this.props;
const { quantity } = this.state;
return (
<CartItemStyles>
<img width="100" src={cartItem.item.image} alt={cartItem.item.title} />
<div className="cart-item-details">
<h3>{cartItem.item.title}</h3>
<p>
{formatMoney(cartItem.item.price * cartItem.quantity)}
{' - '}
<em>
{cartItem.quantity} × {formatMoney(cartItem.item.price)} each
</em>
</p>
<Mutation
mutation={UPDATE_CART_ITEM_MUTATION}
variables={this.state}
>
{(updateCartItem, { loading, error }) => {
return (
<Form2 key={cartItem.id} onSubmit={e => this.updateCartItem(e, updateCartItem)}>
<Error error={error} />
<label htmlFor="quantity">
<input
type="number"
id="quantity"
name="quantity"
placeholder="Quantity"
required
value={quantity}
onChange={this.handleChange}
/>
</label>
<button type="submit">Updat{loading ? 'ing' : 'e'}</button>
</Form2>
)
}}
</Mutation>
</div>
<RemoveFromCart id={cartItem.id} />
</CartItemStyles>
);
}
}
3 Réponses :
Je pense que le problème est que vous passez une valeur des accessoires Pour résoudre ce problème, vous devez transmettre l'état à défautValue ou mettre à jour le PROP carItem à défaitValue, mais onChange Vous modifiez l'état qui n'est pas transmis à défautValue.
CARITEM à ONCHANGE
Le premier numéro est que Value de valeur ne peut être définie sur la charge initiale pour un formulaire. Après cela, il ne sera pas mis à jour "naturellement" car l'intention était seulement de définir une valeur par défaut initiale. L'état est correctement transmis à la valeur , comme on peut le voir consoler de dev la console, mais peu importe ce que je fais que le champ est unidable, comme cela reste en lecture seule. Si vous allez ici: flamingo-next-production.herokuapp.com , connectez-vous à l'aide de tests123 @ 123 .com et test123, puis cliquez sur Shop, puis sur Cliquez sur Panier, puis Ajouter au panier Multiples du même article un élément, puis g au panier et essayez de modifier manuellement la valeur de l'article.
On dirait que vous faites une entrée contrôlée avec une valeur par défaut de l'état? Si tel est le cas, vous auriez besoin de définir la quantité initiale dans l'état sur le Beaucoup de références sont manquantes de ci-dessous, mais vous devriez avoir l'idée. P > cartem.QuanTity code>. class CartItem extends Component {
constructor(props) {
super(props);
this.state = {
quantity: props.cartItem.quantity,
};
}
handleChange = e => {
const { name, type, value } = e.target;
const val = type === 'number' ? parseFloat(value) : value;
this.setState({ [name]: val });
};
render() {
const { quantity } = this.state;
return (
<Mutation
mutation={UPDATE_CART_ITEM_MUTATION}
variables={this.state}
>
{(updateCartItem, { loading, error }) => {
return (
<Form2 onSubmit={e => this.updateCartItem(e, updateCartItem)}>
<Error error={error} />
<label htmlFor="quantity">
<input
type="number"
id="quantity"
name="quantity"
placeholder="Quantity"
value={quantity}
onChange={this.handleChange}
required
/>
</label>
<button type="submit">Updat{loading ? 'ing' : 'e'}</button>
</Form2>
)
}}
</Mutation>
)
}
}
La valeur de quantité actuelle est correctement affichée lorsque valeur = est utilisé, mais si je tente de modifier manuellement la valeur du champ de saisie à quelque chose de différent, je ne peux pas. Le champ reste en lecture seule. Donc, j'ai ajouté un élément 5 fois et le champ d'entrée affiche 5, si j'essaie de changer 5 à une autre valeur, cela ne me laissera pas
Cela me fait penser que la valeur de la quantité dans votre état n'est pas mise à jour correctement. Utilisez-vous la quantité de votre état dans la valeur accessoire?
Si vous allez ici: https://flamingo-next-production.herokuapp.com et connectez-vous en utilisant test123@123.com et test123 , puis cliquez sur boutique , puis cliquez sur Ouvrir le panier, puis Ajouter au panier Ajoutez à nouveau le même article, puis allez dans le panier et essayez de modifier manuellement le Valeur affichée.
Oui, si vous inspectez l'état et les accessoires, vous verrez que l'état est en train de mettre à jour. Je vois aussi que vous utilisez toujours la quantité Quantité à partir du CartItem Prop.
Malheureusement, votre solution ne résout pas mon problème. J'ai modifié ma question originale avec le code complet. Tout fonctionne parfaitement, le champ ne sera tout simplement pas en train de sortir en lecture seule et ne me permettra pas de le mettre à jour manuellement avec une nouvelle valeur.
Le problème a été résolu en supprimant p> Statique GetDeriveDeStateFromProps () Code> et remplaçant par:
componentDidUpdate(prevProps, prevState) {
if (this.props.cartItem.quantity !== prevProps.cartItem.quantity) {
let quantity = this.props.cartItem.quantity;
this.setState(() => {
return {
quantity
}}
);
}
}
componentDidMount() {
let quantity = this.props.cartItem.quantity;
this.setState(() => {
return {
quantity
}}
);
}
Pourriez-vous partager la mise en œuvre de
Handlechange ?Aussi
carItem n'est pas défini dans l'extrait, non?Peut-on voir votre
this.handlechange fonctionner?@ Kabbany @treycos j'ai modifié ma question à montrer
handlechange . En ce qui concerne CartItem, qui est transmis en tant que PROPconst {cartem, client} = ceci.propsEst
caritem un état ou un accessoire?@Kabbany
cartatem est un accessoire.