NextJS: данные формы не отправляются на экспресс-сервер - PullRequest
Новая
       6

NextJS: данные формы не отправляются на экспресс-сервер

0 голосов
/ 11 января 2019

Я пытаюсь отправить данные формы на сервер в приложении Nextjs / express. Когда я нажимаю «отправить», я не вижу, что какой-либо вывод отправляется на сервер.

Я попробовал следующий код, но безуспешно, и я не могу понять, почему он не работает, потому что я новичок в этом стеке. Структура файла моего проекта следующая.

enter image description here

index.js 

class Index extends Component{

render(){
return(
    <form action="/server" method="post">
        <input type="text" id="name"></input>
        <input type="submit"/>
    </form>
);
}
}

server.js 

server.post('/server', (req, res) => {
    const name  = req.body
    res.send(name)
})

Я хочу, чтобы на веб-странице отображались данные, которые я ввел в поле ввода в form.instead, он показывает только пару фигурных скобок ({}).

1 Ответ

0 голосов
/ 11 января 2019

EDIT

Я переключил некоторые вещи из вашего репозитория на передней и задней панели. Вы можете увидеть их в примерах кода!

Для этого вам нужно 2 вещи:

Обработчик onChange для обработки ввода и обработчик onSubmit для обработки отправки на сервер. Вот моя реализация вашего примера. 

class Index extends Component {
    constructor() {
    super();
    this.state = {
        firstName: '',
    };
}
handleChange = evt => {
// This triggers everytime the input is changed
    this.setState({
        [evt.target.name]: evt.target.value,
    });
};
 handleSubmit = evt => {
      evt.preventDefault();
      //making a post request with the fetch API
      fetch('/server', {
        method: 'POST',
        headers: {
              'Accept': 'application/json',
              'Content-Type': 'application/json'
        }, 
        body: JSON.stringify({
             firstName:this.state.firstName
           })
        })
        .then(response => response.json())
        .then(data => console.log(data))
        .catch(error => console.log(error))
     });
  };
render(){
  return(
    <form onSubmit={this.handleSubmit} >
        <input 
            name="firstName" 
            type="text" 
            id="name" 
            value={this.state.firstName} 
            onChange={this.handleChange}>
        </input>
        <input type="submit"/>
    </form>
    );
  }
}

Код вашего сервера: 

const express = require('express')
const next = require('next')
const bodyParser = require('body-parser')

const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

app.prepare().then(() => {
  const server = express()
  server.use(bodyParser.urlencoded({ extended: true }))
  server.use(bodyParser.json())

  server.post('/server', (req, res) => {
    console.log(req.body)
    const firstName = req.body.firstName
    res.send({firstName})
})

  server.get('*', (req, res) => {
    return handle(req, res)
  })

  server.listen(3000, (err) => {
    if (err) throw err
    console.log('> Read on http://localhost:3000')
  })
})

Надеюсь, это поможет!

...