ОПУБЛИКУЙТЕ выбранные значения в раскрывающемся списке в nodejs

ProgramBox

ОПУБЛИКУЙТЕ выбранные значения в раскрывающемся списке в nodejs

Post author:admin
Запись опубликована:6 января, 2022
Post category:Вопросы по программированию

#node.js #reactjs

Вопрос:

Я хочу опубликовать раскрывающееся значение из react в NodeJS. мой код реакции:

 import React from 'react' import axios from 'axios' export default class Inference extends React.Component {  constructor(props) {  super(props);  this.state = {    model: "",    options: [  { label: "Cat", value: "cat" },  { label: "Traffic", value: "traffic" },  { label: "Dog", value: "dog" },  ],  };  this.handleChange = this.handleChange.bind(this);  }    handleChange(e) {    this.setState({ model: e.target.value });  console.log("Model Selected!!");  }     handleSubmit(event) {  event.preventDefault();  const { example } = event.target;  console.log("value", example.value);  }    componentDidMount() {  axios  .post('http://localhost:5000/getmodel', {    model: this.state.model,    })  .then((res) =gt; {  // Res.data is the response from your server  console.log(res.data);  });   }    render() {      const { options } = this.state;        return (  lt;div className="container"gt;  lt;div className="row"gt;    lt;div  className="col-6"  style={{  paddingBottom: "100px",  paddingTop: "20px",  alignItems: "center",  }}  gt;  lt;label  className=""  style={{ paddingTop: "5px", marginTop: "40px" }}  gt;  Model  lt;form method="post" action="/getmodel" onSubmit={this.handleSubmit}gt;  lt;select  className="custom-select"  name="example"  value={this.state.model}  onChange={this.handleChange}  style={{ paddingTop: "5px", marginTop: "10px" }}  gt;  lt;optiongt;--Select--lt;/optiongt;  {options.map((option) =gt; (  lt;option  value={option.value}  onChange={(e) =gt; this.setState({ model: e.target.value })}  gt;  {option.label}  lt;/optiongt;  ))}  lt;/selectgt;        lt;button  type="submit"  class="btn btn-success"  style={{ marginTop: "100px" }}  gt;  Inference  lt;/buttongt;  lt;/formgt;  lt;/labelgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  );  }  }

мой код nodejs:

 app.post('/getmodel', (req, res) =gt; {  // Logs course sent from front end  console.log(req.body.model);  });  app.get('/', function (req, res) {  // Cookies that have not been signed  console.log('hello: ',req.body)    })

пожалуйста, объясните мне, как разместить значение в NodeJS, чтобы я мог получить значение по req.body.model или что-то в этом роде. как получить ценность от react так же, как мне было нужно Основной мотив: я хочу получить выпадающее выбранное значение из reactjs в NodeJS. мне нужна помощь в почтовом коде react и node get(для этого почтового кода), пожалуйста, помогите мне

1. внутри дескриптора отправить функцию вызова узла POST API с помощью axios. axios.post(URL, {yourPostData}) это отправит ваши данные на сервер узла, покажет в виде API post и кода на сервере узла, если вам нужен идеальный ответ

2. @sojin братан, я обновил код, пожалуйста, проверьте

Ответ №1:

Вы добавили axios в componentDidMount, что неверно, сообщение должно произойти при отправке формы. componentDidMount будет вызывать после каждого рендеринга метод жизненного цикла. Пожалуйста, ознакомьтесь с документацией react для лучшего объяснения, Попробуйте этот код, который вызовет API, когда вы нажмете кнопку «Отправить», которая является кнопкой «Вывод».

 import React from 'react' import axios from 'axios' export default class Inference extends React.Component {  constructor(props) {  super(props);  this.state = {    model: "",    options: [  { label: "Cat", value: "cat" },  { label: "Traffic", value: "traffic" },  { label: "Dog", value: "dog" },  ],  };  this.handleChange = this.handleChange.bind(this);  }    handleChange(e) {    this.setState({ model: e.target.value });  console.log("Model Selected!!");  }   handleSubmit(event) {  event.preventDefault();  axios.post('http://localhost:5000/getmodel', {  model: this.state.model,  })  .then((res) =gt; {  // Res.data is the response from your server  console.log(res.data);  });  }       render() {      const { options } = this.state;        return (  lt;div className="container"gt;  lt;div className="row"gt;    lt;div  className="col-6"  style={{  paddingBottom: "100px",  paddingTop: "20px",  alignItems: "center",  }}  gt;  lt;label  className=""  style={{ paddingTop: "5px", marginTop: "40px" }}  gt;  Model  lt;form onSubmit={this.handleSubmit.bind(this)}gt;  lt;select  className="custom-select"  name="example"  value={this.state.model}  onChange={this.handleChange}  style={{ paddingTop: "5px", marginTop: "10px" }}  gt;  lt;optiongt;--Select--lt;/optiongt;  {options.map((option) =gt; (  lt;option  value={option.value}  onChange={(e) =gt; this.setState({ model: e.target.value })}  gt;  {option.label}  lt;/optiongt;  ))}  lt;/selectgt;        lt;button  type="submit"  class="btn btn-success"  style={{ marginTop: "100px" }}  gt;  Inference  lt;/buttongt;  lt;/formgt;  lt;/labelgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  );  }  }

1. Ошибка типа: Не удается прочитать свойства неопределенного (чтение «состояния») при запуске этого кода я получил эту ошибку

2. Вам нужно привязать это к форме отправки, обновлю свой ответ

3. хорошо, братан, пожалуйста, обнови, я жду этого

4. Я отлично работаю, братан,сейчас я получаю его на своих узлах,но проблема в том,что я не могу его использовать, я хочу использовать для запроса базы данных.это мое приложение кода.get(‘/model’, (req, res)=gt;{ пусть модель = req.body.model; пусть sql =»выберите * из списка new_schema.model_list, new_schema.images, где имя_модели=» mysql.escape(модель) db.query(sql, модель, (err, результаты) =gt;gt;{ если(err){ ошибка } console.log(результаты) res. отправить(результаты); }) })

5. Почему? вы можете прочитать это так: «req.body.model». не забудьте проголосовать и отметить ответ, если это окажется полезным для вас

Ответ №2:

Вы можете использовать axios для отправки запроса и включения информации в текст запроса. Вторым параметром метода post от axios является тело вашего запроса. Вот пример того, как сделать запрос axios POST с данными.

 axios  .post('/some_endpoint', {  dataset: this.state.dataset,  model: this.state.model,  course: this.state.course,  })  .then((res) =gt; {  // Res.data is the response from your server  console.log(res.data);  });

Теперь на вашем бэкэнде вы можете получить доступ к курсу через req.body

 router.post('/some_endpoint', (req, res) =gt; {  // Logs course sent from front end  console.log(req.body.course); });