Question

我目前正在尝试从服务器端发送一条消息，并将其显示在我的React前端。

我已尽一切努力显示我在res.send（）中使用的消息，但react无法接收到它，有人可以帮助我指出我在这里做错了吗？

前端示例：

import React, {Component} from 'react';
import axios from 'axios';

import Tabs from 'react-bootstrap/Tabs';
import Tab from 'react-bootstrap/Tab';

export default class CreateFile extends Component {


constructor(props) {
    super(props);

    this.onChangeFileDescription = this.onChangeFileDescription.bind(this);



    this.onSubmit = this.onSubmit.bind(this);

    this.state = {
        file_description: '',

    };
    this.handleSelect = this.handleSelect.bind(this);
    axios
        .get("http://localhost:4000/api/isloggedin")
        .then(res => {
            if (!res.data) {
                return this.setState({isloggedin: false});
            }
        });

}



onChangeFileDescription(e) {
    this.setState({
        file_description: e.target.value
    });
}


onSubmit(e) {
    e.preventDefault();

    console.log(`Form submitted:`);
    console.log(`File Description: ${this.state.file_description}`);


    const newFile = {
        file_description: this.state.file_description,
    }

    axios.post('http://localhost:4000/files/add', newFile)
        .then(res => console.log(res.data));

    this.setState({
        file_description: '',

    })
}

render() {
    return this.state.isloggedin ? (
        <div style={{marginTop: 20}}>

            <h3>Upload a New File</h3>


            <Tabs
                id="controlled-tab-example"
                activeKey={this.state.key}
                onSelect={key => this.setState({key})}
            >
                <Tab eventKey="audio" title="Audio">

                    <form onSubmit={this.onSubmit}>
                        <div className="form-group">
                            <label>File Description: </label>
                            <input type="text"
                                   className="form-control"
                                   value={this.state.file_description}
                                   onChange={this.onChangeFileDescription}
                            />
                        </div>


            </Tabs>

        </div>
    ) : (
        <h3>Please login</h3>
    );
}
}

这是服务器端：

我正在检查提交的表单是否为空，是否正在发送错误，要求用户填写必填字段。

const express = require('express');
const bodyParser = require('body-parser');
const fileRoutes = express.Router();
const File = require("../models/fileHandler");

module.exports = function(app) {


app.use(bodyParser.json());

fileRoutes.route('/').get(function (req, res) {
    File.find(function (err, files) {
        if (err) {
            console.log(err);
        } else {
            res.json(files);
        }
    });
});

fileRoutes.route('/:id').get(function (req, res) {
    let id = req.params.id;
    File.findById(id, function (err, file) {
        res.json(file);
    });
});


fileRoutes.route('/add').post(function (req, res) {

   console.log(req.body.file_description);

   if (req.body.file_description === ""){

       console.log("its empty!");
       var result = {"data" :"hello everybody !"}
       res.status(200).json({'description': 'description is needed'});
       return res.send(result);
   }


    let file = new File(req.body);
    file.save()
        .then(file => {
            res.status(200).json({'file': 'file added successfully'});
        })
        .catch(err => {
            res.status(400).send('adding new file failed');
        });
});


fileRoutes.route('/update/:id').post(function (req, res) {
    File.findById(req.params.id, function (err, file) {
        if (!file)
            res.status(404).send('data is not found');
        else
            file.file_description = req.body.file_description;
            file.file_size = req.body.file_size;
            file.file_duration = req.body.file_duration;
            file.file_artist = req.body.file_artist;
            file.file_bitrate = req.body.file_bitrate;
            file.file_codec = req.body.file_codec;
            file.file_audioChannels = req.body.file_audioChannels;
            file.file_dimensions = req.body.file_dimensions;
            file.file_tag = req.body.file_tag;
            file.file_colorProfile = req.body.file_colorProfile;
            file.file_extension = req.body.file_extension;
            file.file_employeeResponsible =         req.body.file_employeeResponsible;
            file.file_editActive = req.body.file_editActive;
            file.file_completed = req.body.file_completed;

        file.save().then(file => {
            res.json('File updated');
        })
            .catch(err => {
                res.status(400).send("Update not possible");
            });
    });
});

app.use('/files', fileRoutes);

  };

Answer 1

好的，经过一番挖掘，我设法解决了这个问题。我以为我张贴在这里，以防有人遇到类似问题。

所以我要做的是使用快速验证器检查所有内容，以及将其发送到React前端是否有任何问题。

并且在响应前端中，如果收到关于该特定字段的任何问题，它将显示在输入字段的顶部。希望这会有所帮助。

  {this.state.errors &&
                        this.state.errors.file_description && <p>{this.state.errors.file_description.msg}

还有反应前端的完整代码段。

import React, {Component} from 'react';
import axios from 'axios';

import Tabs from 'react-bootstrap/Tabs';
import Tab from 'react-bootstrap/Tab';

export default class CreateFile extends Component {


constructor(props) {
    super(props);

    this.onChangeFileDescription = this.onChangeFileDescription.bind(this);


    this.onSubmit = this.onSubmit.bind(this);

    this.state = {
        file_description: ''
    };
    this.handleSelect = this.handleSelect.bind(this);
    axios
        .get("http://localhost:4000/api/isloggedin")
        .then(res => {
            if (!res.data) {
                return this.setState({isloggedin: false});
            }
        });

}



onChangeFileDescription(e) {
    this.setState({
        file_description: e.target.value
    });
}

onSubmit(e) {
    e.preventDefault();

    console.log(`Form submitted:`);
    console.log(`File Description: ${this.state.file_description}`);


    const newFile = {
        file_description: this.state.file_description

    }

    axios.post('http://localhost:4000/files/add', newFile)
        .then(result => {
            if (result.data.errors) {
                return this.setState(result.data);
            }
            return this.setState({
                userdata: result.data,
                errors: null,
                success: true
            });
        });

    this.setState({
        file_description: ''

    })
}

render() {
    return this.state.isloggedin ? (
        <div style={{marginTop: 20}}>

            <h3>Upload a New File</h3>


                    <form onSubmit={this.onSubmit}>
                        <div className="form-group">
                            <label>File Description: </label>
                            <input type="text"
                                   className="form-control"
                                   value={this.state.file_description}
                                   onChange={this.onChangeFileDescription}/>

                            {this.state.errors &&
                            this.state.errors.file_description && <p>{this.state.errors.file_description.msg}</p>}
                        </div>
                                <label className="form-check-label">Yes</label>
                            </div>

                        </div>
                        <div className="form-group">
                            <input type="submit" value="Upload File" className="btn btn-primary"/>
                        </div>
                    </form>

                </Tab>

            </Tabs>

        </div>
    ) : (
        <h3>Please login</h3>
    );
}
}

对于后端，我也对其进行了调整，因此，如果有任何问题，它将使用Express验证器并使用常规的route和post方法将其发布回React前端。

const express = require('express');
var { check, validationResult } = require("express-validator/check");
const bodyParser = require('body-parser');
const fileRoutes = express.Router();
const File = require("../models/fileHandler");

module.exports = function(app) {

const fileValidation = [
    check("file_description")
        .not()
        .isEmpty()
        .withMessage("Description required"),
];

app.use(bodyParser.json());

fileRoutes.route('/').get(function (req, res) {
    File.find(function (err, files) {
        if (err) {
            console.log(err);
        } else {
            res.json(files);
        }
    });
});

fileRoutes.route('/:id').get(function (req, res) {
    let id = req.params.id;
    File.findById(id, function (err, file) {
        res.json(file);
    });
});


fileRoutes.route('/add').post(fileValidation, function (req, res) {

    var errors = validationResult(req);

    if (!errors.isEmpty()) {
        return res.send({ errors: errors.mapped() });
    }else{

        console.log("its empty!");


        let file = new File(req.body);
        file.save()
            .then(file => {
                res.status(200).json({'file': 'file added successfully'});
            })
            .catch(err => res.send(err));
    }

});


fileRoutes.route('/update/:id').post(function (req, res) {
    File.findById(req.params.id, function (err, file) {
        if (!file)
            res.status(404).send('data is not found');
        else
            file.file_description = req.body.file_description;

        file.save().then(file => {
            res.json('File updated');
        })
            .catch(err => {
                res.status(400).send("Update not possible");
            });
    });
});


app.use('/files', fileRoutes);

 };

从服务器端向React前端（NodeJS）发送消息

1 个答案: