Cześć!
Piszę do was, gdyż napotkałem na swojej drodze mały problem. Tworzę aplikację to do w oparciu o react. Wcześniej udało mi się stworzyć taką aplikację z użyciem tablicy bezpośrednio w javascript (dokładniej w state). Teraz chciałem zrobić to samo tylko, że przenosząc tą tablicę obiektów do pliku data.json, który umieściłem w folderze public. Ogólnie wyświetlanie obiektów, które są w pliku data.json działa jak należy. Problem napotkałem podczas tworzenia metody do ich usunięcia. Nie znalazłem w internecie rozwiązania, które by działało. Jestem zielony jeśli chodzi o metodę fetch, dlatego prosiłbym o pomoc. Poniżej załączam plik data.json i App.js, w którym wykonuje się metoda deleteItem.
{
"items": [
{
"id": 0,
"content": "Tutaj jest treść przykładowej notatki",
"date": "2021-04-15",
"isFinished": false,
"priority": "normal"
},
{
"id": 1,
"content": "Zrobić coś bardzo ważnego!",
"date": "2021-04-16",
"isFinished": false,
"priority": "normal"
}
]
}
import React from 'react';
import './App.css';
import ItemList from './ItemList/ItemList';
import AddItem from './AddItem/AddItem';
class App extends React.Component {
state = {
items: []
}
componentDidMount() {
fetch('data.json')
.then(res => res.json())
.then(data => {
this.setState({
items: data.items
});
})
.catch((error) => console.log(error));
}
deleteItem = (id) => {
const itemList = [...this.state.items];
const index = itemList.findIndex(item => item.id === id);
itemList.splice(index, 1);
fetch('data.json/' + index, {
method: 'DELETE',
})
.then(res => res.json())
this.setState({
items: [...itemList]
})
}
render() {
return (
<div className="App">
<div className="container">
<AddItem />
<ItemList items={this.state.items} deleteItem={this.deleteItem}/>
</div>
</div>
);
}
}
export default App;
Pozdrawiam!