Реакция формы с использованием Express API возвращает Cannot POST

Question

Мне удалось заставить работать форму при использовании pug в качестве движка представления с Express.js.Но когда я попытался использовать React, я не смог заставить работать форму правильно.

// Component.js
  </React.Fragment>
         // API_POST_URL=http://localhost:4000/api/donate
      <form action={process.env.API_POST_URL} method='post' id='testForm'> 
        <input type="hidden" name='step' value='3' />
        <button type='submit'>Post Test form</button>
      </form>
  </React.Fragment>

.

// index.js in another project folder
router.post('/api/donate', (req, res, next) => {

 // code testing for earlier steps removed

 else if (req.body.step === '3') {
      res.json({ message : "here's a response back"});
  }
});

Внешний интерфейс работает на порте 3000, заднийконец на порту 4000. Проблема может быть связана с неправильным соединением проектов.Маршрутизация - это еще одна возможность.

Мне удалось получить объект ответа, используя запросы Postman к URL-адресу переменной ENV, указанному выше (http://localhost:4000/api/donate)

Answer 1

Ваш код обновит страницу, и вы потеряете состояние приложения, которое не является целью SPA.

Вы можете сделать это следующим образом:

</React.Fragment>
  <form onSubmit={submitFormHandler()}> 
    <input type="hidden" name='step' value='3' />
    <button type='submit'>Post Test form</button>
  </form>

Сохранить поле выше в состоянии компонента и передать его submitFormHandler ()

Использовать axios для отправки формы с использованием http.

submitFormHandler = (data) => { axios.post('http://localhost:4000/api/donate',data);}