J'utilise localStorage.setItem et localStorage.getItem pour stocker des données (appareils, dans mon cas) à partir d'une API afin de les conserver lors des réinitialisations de page. Lorsqu'un appareil est cliqué, il est stocké dans un panier. Lorsque l'utilisateur clique sur un appareil dans le sac, je souhaite qu'il puisse «supprimer» et être retiré du stockage local.
À l'heure actuelle, cela fonctionne de sorte que sur l'interface utilisateur, il montre qu'il est en cours de suppression, mais lorsque la page s'actualise, il revient car il est toujours dans le localStorage.
J'ai essayé d'utiliser localStorage.removeItem (deviceTitle) dans ma fonction removeDevice , mais il ne semble rien faire. Est-ce parce que j'ai le localStorage.getItem dans le componentDidMount ? Si tel est le cas, comment puis-je changer cela pour que la fonction removeItem fonctionne?
addDevice () est appelé pendant par la fonction onClick (veuillez laisser je sais si vous avez besoin de voir cette partie du code)
render() {
return (
<div>
<form>
<input
type="text"
placeholder="Search for devices..."
onChange={this.onChange}
/>
{this.state.devices.map(device => (
<ul key={device.title}>
<p>
{device.title}{" "}
<i
className="fas fa-plus"
style={{ cursor: "pointer", color: "green" }}
onClick={e => this.addDevice(e, device.title)}
/>
</p>
</ul>
))}
</form>
{this.state.bag.map(device => (
<p key={device.title}>
{device}
<i
className="fas fa-times"
style={{ cursor: "pointer", color: "red" }}
onClick={e => this.removeDevice(e, device)}
/>
</p>
))}
<button onClick={e => this.removeAll(e)}>Remove all</button>
</div>
);
}
}
Voici où l'appareil est censé être supprimé du stockage local
componentDidMount() {
this.search("");
const storedList = JSON.parse(localStorage.getItem("list"));
console.log(storedList);
const bag = storedList;
this.setState({ bag });
}
et voici mon componentDidMount () où les appareils sont stockés
removeDevice = (e, deviceTitle) => {
this.setState(prevState => ({
bag: prevState.bag.filter(d => d !== deviceTitle)
}));
localStorage.removeItem(deviceTitle);
};
MODIFIER plus de code ajouté ci-dessous:
addDevice = (e, deviceTitle) => {
const array = Array.from(this.state.bag);
if (array.indexOf(deviceTitle) === -1) {
array.push(deviceTitle);
} else {
return;
}
localStorage.setItem("list", JSON.stringify(array));
this.setState({
bag: array
});
};
3 Réponses :
Vous définissez la liste d'éléments sur votre gamme d'appareils. Mais si vous le supprimez, vous essayez de supprimer le nom du périphérique.
La façon dont vous pourriez supprimer un élément serait de le supprimer du tableau, puis d'appeler localStorage.setItem ("list", JSON.stringify (array)); avec le tableau sans cet élément que vous souhaitez supprimer.
En savoir plus ici: https: //developer.mozilla .org / fr-FR / docs / Web / API / Storage / removeItem
Ohh d'accord, je pense que j'y pensais trop profondément. Je l'ai essayé et cela fonctionne, mais pour une raison quelconque, ne supprime pas le dernier élément sur lequel j'ai cliqué. Savez-vous pourquoi cela pourrait être? Par exemple, j'ai: Airpods, Macbook, iPhone et je supprime iPhone puis Macbook, mais lorsque je réinitialise la page, Macbook est toujours là.
Comme vous filtrez déjà les données et mettez à jour l'état, vous pouvez ajouter le deuxième argument pour setState qui est un rappel. Dans votre rappel, vous pouvez obtenir le sac mis à jour de votre état et le configurer pour remplacer la valeur dans localStorage.
Vous pouvez le faire de cette façon
removeDevice = (e, deviceTitle) => {
this.setState(prevState => ({
bag: prevState.bag.filter(d => d !== deviceTitle)
}), () => {
const { bag } = this.state;
localStorage.setItem("list", JSON.stringify(bag))
});
};
Merci! Je l'ai essayé de cette façon et pour une raison quelconque, ne me laisse pas supprimer le dernier appareil ... savez-vous pourquoi cela pourrait être? J'ai mis à jour ma question pour inclure plus de code si nécessaire.
Remplacez simplement le tableau après avoir supprimé l'élément lui-même
removeDevice = (e, deviceTitle) => {
this.setState(prevState => ({
bag: prevState.bag.filter(d => d !== deviceTitle)
}));
// actual localStorage item removing
let devicesArray = JSON.parse(localStorage.getItem("list"))
devicesArray.splice(devicesArray.indexOf(deviceTitle), 1)
localStorage.setItem("list", JSON.stringify(devicesArray));
};
car le paramétrage de l'élément s'il est là, il remplace sa valeur check ici
Merci beaucoup, cela a fonctionné! Pouvez-vous me dire ce que fait la fonction .splice?
il supprime un élément du tableau developer.mozilla. org / en-US / docs / Web / JavaScript / Reference /…
Dans la plupart des cas,
setStatene met pas immédiatement à jour l'état, vous devez donc mettre à jourlocalStoragedans son argument de rappel, voir reactjs.org/docs/...