Как добавить объект в базу данных, используя метод POST в React?

Ожидаемый результат: создать поддельный API --> вызвать функцию save --> метод POST --> сохранить объект time в this.state.resul --> сохранить db.json todos id 2

Я использую библиотеку Fake an API with JSON Server.

db.json

{
  "todos": [
    {
      "id": 1,
      "title": "AAAA"
      "results": [
        {
          "time": "09:10:01",
          "desc": "bbbbb"
        },
        {
          "desc": "gfgfgfgffg",
          "time": "21:30:06"
        }
      ]
    },
    {
      "id": 2,
      "title": "BBBBBBB",
      "results": [
        {
          "time": "09:10:01",
          "desc": "reerrererer",
        },
        {
           "desc": "dfdfdfdfdfdfdfdfdfdfdf",
          "time": "21:30:06"
        }
       ]
      }
     }   

Todos

class Todos extends Component {
  constructor (props) {
  super(props);
     this.state = {
     todos: []
   }
 }

  componentDidMount() {
    axios.get("http://localhost:3000/todos")
      .then(response => {
        this.setState({
          todos: response.data
        });
      })
      .catch(error => {
        console.info('Error);
      }
    );
  }

  render () {
     return(
 )      
}
 }
export default Todos;

Секундомер

class StopWatch extends Component {
  constructor() {
   super();

    this.state = {
      resul: []
    };

  }


  save = () => {
     const resul = this.state.resul;
     this.clock = {
      clock: this.clock
    }
    resul.push(this.clock);

    this.setState({
       resul
    });

    axios.post(`http://localhost:4000/todos/2`, {
      results: this.clock
    })
     .then(function (response) {
      console.info(response);
     })
     .catch(function (error) {
       console.info(error);
    });
  }
  }


render () {
   return (
      <ul className = "results">


        {
          this.state.resul
            .map((item, index) => 
              <Time 
                key= {index}
              />
            )
        }
      </ul> 
     );
  }
}


export default StopWatch;
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
956
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Используйте put для обновления массива и передайте весь объект, который вы хотите обновить.

save = () =>{
  const resul = JSON.parse(JSON.stringify(this.state.resul));

  this.clock = {
    clock: this.clock
  };
  resul.push(this.clock);

  this.setState({
    resul
  });

  const todo = {
    id: 2,
    title: 'BBBBBBB',
    results: resul
  };

  axios
    .put(`http://localhost:4000/todos/2`, todo)
    .then(function(response) {
      console.info(response);
    })
    .catch(function(error) {
      console.info(error);
    });
}

Другие вопросы по теме