React Fetch - usuwanie obiektu z lokalnego pliku

Question

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!

Comments

fetch('data.json/' + index, {
      method: 'DELETE',
    })
    .then(res => res.json())

Co zwraca to zapytanie? Nie rzuca błędem? Jak to obsługujesz po stronie backendu?

---

To zapytanie jest od podstaw źle stworzone. Aplikacja nie posiada backend Jedynie co to w osobnej metodzie za pomocą fetch pobiera dane i przekazuje do kolejnego kompontentu, które je wyświetla. Myślałem o integracji aplikacji react z node i wtedy nie byłoby problemu, ale szczerze dopiero uczę się react i nie wiem jeszcze jak zintegrować node z react. Szukam najprostszego, prawidłowego rozwiązania, które umożliwi mi usunięcie objektu z pliku json.

Answer 1

Prosty backend w Node możesz postawić korzystając np. z Express'a.

Przykład z odczytem pliku na początku i każdorazowym nadpisywaniem go przy DELETE:

const express = require('express')
const app = express()

const { readFileSync, writeFileSync } = require('fs')
const data = JSON.parse(readFileSync('/data.json').toString())
 
app.delete('/data:index', function (req, res) {
  data.items.splice(req.params.index, 1); // usuń element z tablicy
  writeFileSync('/data.json', JSON.stringify(data)); // zapisz całość do pliku jako JSON
  res.send('Successfully deleted')
})
 
app.listen(3000)

Tylko, że takie każdorazowe nadpisywanie pliku, przy obsłudze metody HTTP, na dysku nie jest zbyt dobrym pomysłem.

---

Korzystając z metody DELETE pewnie napotkasz na problemy z CORS. Więc warto to obsłużyć odpowiednimi nagłówkami (przyda Ci się przynajmniej nagłówek Access-Control-Allow-Methods).

Comments

Pozostaje kwestia połączenia reacta z node co zapewne niej jest takie proste. Czy istnieje więc możliwość, na tym etapie, aby usynac obiekt z pliku przy użyciu metofy fetch? Zastanawia mnie to, gdyż odczyt pliku json jest banalnie prosty, jest wykonanie innych operacji CRUD na tym pliku, przy użyciu fetch, już nie jest takie proste.

---

Pozostaje kwestia połączenia reacta z node co zapewne niej jest takie proste

Czemu? Nie ma za bardzo znaczenia czy używasz Reacta, czy innego frameworka/biblioteki - komunikacja tutaj jest za pośrednictwem Ajaxa. Więc taki fetch jak próbowałeś zrobić powinien wystarczyć - tylko zmień ścieżkę w URL-u z "data.json" na "data", albo w routcie Express'a zmień "data" na "data.json" (ścieżka z kropką powinna działać wg docsów).

Czy istnieje więc możliwość, na tym etapie, aby usynac obiekt z pliku przy użyciu metofy fetch?

W normalnych warunkach strona internetowa udostępniana jest z serwera i to w jego gestii leży jak obsłuży metodę DELETE (lub każdą inną metodę HTTP). Sam fetch nie służy do wykonywania akcji na serwerze. On tylko wysyła zapytanie (wraz z nagłówkami i opcjonalnym ciałem) pod wskazany URL i umożliwia obsługę zwróconej z serwera odpowiedzi po stronie klienta - tyle. Pobieranie pliku JSON działa Ci dlatego, że wysyłasz zapytanie GET pod zasób o danym URL-u i serwer Ci go zwraca. Podobnie wygląda sytuacja z pobieraniem strony internetowej - gdy w przeglądarce wpisujesz adres np. google.com, to przeglądarka wysyła request GET i pobiera tą stronę, a następnie przetwarza ją i wyświetla w formie, którą widzisz jako użytkownik. Ale jeśli np. serwer, który obsługuje domenę google.com nie miałby implementacji dla metody GET to prawdopodobnie dostałbyś błąd 404, że nie znaleziono strony.