Fetch metoda post - react js

Question

Witam , dopiero zaczynam z fetchem i nie do końca wiem co jest źle.

Problem wygląda tak po użyciu metody post i przesłaniu obiektu do bazy zostaje dodany nowy element , zamiast jego podmienienia. Używam json servera do swojej aplikacji.  Chciałbym aby obiekt 'obj' został podmieniony w miejsce easy w api, a zamiast tego dostaje poprostu 4 element z id:4 .

import React, { Component } from 'react';
import './App.css';

class App extends Component {
    constructor(props){
        super(props);
        const isLoading = false;
        this.state = {
            isLoading,
        }
    }
    onLoad = () => {
        const obj = [
            {id: 1,time: 10},
            {id: 2,time: 15},
            {id: 3,time: 50},
        ];
        fetch('http://localhost:3001/easy')
            .then( resp => resp.json())
            .then( bestTimes => {
                console.log(bestTimes)
            }
        );
        fetch('http://localhost:3001/easy', {
            method: 'POST',
            body: JSON.stringify( { obj })
        })
            .then( resp =>  resp.json())
            .then( data => console.log(data))
        };
  render() {
        if(!this.state.isLoading){
            {this.onLoad()}
        }
        return <div>
            załadowano
        </div>
      }
}
export default App;

plik json wygląda tak :

{
  "easy": [
    {
      "id": 1,
      "time": "23"
    },
    {
      "id": 2,
      "time": "25"
    },
    {
      "id": 3,
      "time": "30"
    },
//własnie ten element wskakuje w to miejsce zamiast podmienienia
    {
      "id": 4
    }
  ],
  "medium": [
    {
      "id": 1,
      "time": "47"
    },
    {
      "id": 2,
      "time": "56"
    },
    {
      "id": 3,
      "time": "71"
    }
  ]
}

 

Answer 1

Zdefinuj json serwera => mongo?

Comments

a czy to zdefiniowanie jest konieczne? Wydaję mi się ,że coś źle przekazuje do json server tylko nie wiem dokładnie co. Próbowałem to zmienić za pomocą metody PUT , ale wtedy wyskakuje mi błąd 404.

---

No raczej xp, tak by każdy mógł sobie nadpisywać xd.

Przed wszystkim, jeżeli korzystasz z biblioteki react-app to wywołujesz serwer webpackowy.

https://webpack.js.org/configuration/dev-server/

Który działa na node.js, stricte jest o wrapowany o to.

By móc wywołować połączenie musisz przekazać konfiguracje.

module.exports = {
  //...
  devServer: {
    before: function(app) {
      app.get('/some/path', function(req, res) {
        res.json({ custom: 'response' });
      });
    }
  }

Ale to tylko działa przy trybie dev. Ma ci to pomóc w pracy, nie musisz odświeżać strony etc., ale ta cześć koduje nie znajdzie w docelowym rozwiązaniu(tak mi się wydaje, nigdy za bardzo nie eksperymentowałem z devSerwerem) po zbudowaniu aplikacji na wersję produkcyjną.

Powinen być do tego osobny projekt.

Po trzecie, devServer nie ma takiego zdefinowanego route ani zdefiniowanej metody jaka jest akceptowalna na tym route oraz co ma wykonać z kodem.