J'ai créé pour faire la liste à l'aide de réaction, mais je veux que ce soit un stockage local - donc lorsque l'utilisateur actualise la page, il a toujours enregistré les éléments et les présentera. J'ai lu que j'ai besoin d'utiliser localStorage mais je ne suis pas sûr d'où et comment, joindre le composant App.js et toDoItem
export default class TodoItem extends Component {
state = {
avatarURL: '',
}
componentDidMount() {
imgGen().then(avatarURL => this.setState({ avatarURL }));
}
render() {
const { title, handleDelete, handleEdit } = this.props;
const { avatarURL } = this.state;
return (
<h6>{title}</h6>
<span className="mx-2 text-success" onClick={handleEdit}>
</span>
<span className="mx-2 text-danger" onClick={handleDelete}>
</span>
);
}
}
3 Réponses :
Vous pouvez le faire comme ça, pensez les commentaires
class App extends Component {
state = {
// load items while initializing
items: window.localStorage.getItem('items') ? JSON.parse(window.localStorage.getItem('items')) : [],
id: uuidv4(),
item: "",
editItem: false
};
handleChange = e => {
// ...
};
handleSubmit = e => {
e.preventDefault();
const newItem = {
id: this.state.id,
title: this.state.item
};
const updatedItems = [...this.state.items, newItem];
// Save items while changing
window.localStorage.setItem('items', JSON.stringify(updatedItems));
this.setState({
items: updatedItems,
item: "",
id: uuidv4(),
editItem: false
});
};
// ...
render() {
return (
<>
<TodoInput
item={this.state.item}
handleChange={this.handleChange}
handleSubmit={this.handleSubmit}
editItem={this.state.editItem}
/>
<TodoList
items={this.state.items}
clearList={this.clearList}
handleDelete={this.handleDelete}
handleEdit={this.handleEdit}
/>
</>
);
}
}
Voici une logique simple que vous pouvez utiliser dans votre Pour ajouter au localStorage Veuillez regarder Cette question
ComponentDidDmount () de votre application .
const localstoragelist = localstorage.getem ('todo-liste')
si (! localtstoragelist) {renvoie null} elv {this.setstate ({articles: localStoragelist})
Vous pouvez formater votre todoliste dans une chaîne JSON et le stocker à l'aide de: Toutefois, le stockage local Web comporte des limitations de stockage qui causeront des problèmes si les données stockées deviennent plus grandes.
Plus d'infos à ici Peut-être Vous pouvez envisager d'envisager indexeddb (si vous stockez d'énormes données) info < / a>