• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

React Fetch - usuwanie obiektu z lokalnego pliku

Object Storage Arubacloud
0 głosów
537 wizyt
pytanie zadane 29 kwietnia 2021 w JavaScript przez rszczepanski02 Obywatel (1,180 p.)

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!

komentarz 29 kwietnia 2021 przez ScriptyChris Mędrzec (190,190 p.)
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?

komentarz 29 kwietnia 2021 przez rszczepanski02 Obywatel (1,180 p.)
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.

1 odpowiedź

0 głosów
odpowiedź 29 kwietnia 2021 przez ScriptyChris Mędrzec (190,190 p.)

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).

komentarz 29 kwietnia 2021 przez rszczepanski02 Obywatel (1,180 p.)
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.
komentarz 29 kwietnia 2021 przez ScriptyChris Mędrzec (190,190 p.)

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.

Podobne pytania

+1 głos
1 odpowiedź 357 wizyt
pytanie zadane 2 kwietnia 2021 w JavaScript przez Oskar Szkurłat Bywalec (2,780 p.)
0 głosów
2 odpowiedzi 1,514 wizyt
pytanie zadane 3 marca 2020 w JavaScript przez Wojtek Ćwiklik Nowicjusz (120 p.)
0 głosów
1 odpowiedź 437 wizyt
pytanie zadane 25 września 2019 w JavaScript przez Mariusz Podgórski Początkujący (400 p.)

92,684 zapytań

141,589 odpowiedzi

320,073 komentarzy

62,044 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...