#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); });
Комментарии:
1. @sojin братан, я обновил код с твоим почтовым кодом, но все равно не смог получить эти данные, пожалуйста, проверьте