• 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

0 głosów
43 wizyt
pytanie zadane 29 kwietnia w JavaScript przez rszczepanski02 Użytkownik (690 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 przez ScriptyChris Mędrzec (168,700 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 przez rszczepanski02 Użytkownik (690 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 przez ScriptyChris Mędrzec (168,700 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 przez rszczepanski02 Użytkownik (690 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 przez ScriptyChris Mędrzec (168,700 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ź 95 wizyt
0 głosów
2 odpowiedzi 348 wizyt
pytanie zadane 3 marca 2020 w JavaScript przez Wojtek Ćwiklik Nowicjusz (120 p.)
0 głosów
1 odpowiedź 263 wizyt
pytanie zadane 25 września 2019 w JavaScript przez Mariusz Podgórski Początkujący (400 p.)

85,875 zapytań

134,650 odpowiedzi

298,919 komentarzy

56,743 pasjonatów

Advent of Code 2021

Top 15 użytkowników

  1. 1048p. - rucin93
  2. 1042p. - Whistleroosh
  3. 989p. - adrian17
  4. 984p. - Mikbac
  5. 982p. - Mateusz Bogdan
  6. 912p. - nidomika
  7. 867p. - Michal Drewniak
  8. 859p. - CC PL
  9. 854p. - Argeento
  10. 704p. - ScriptyChris
  11. 692p. - s. Dorota Kowalewska
  12. 683p. - tokox
  13. 660p. - Vinox
  14. 645p. - TheLukaszNs
  15. 628p. - WhiskeyTaster
Szczegóły i pełne wyniki

Motyw:

Akcja Pajacyk

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

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...