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

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

javascript reactjs

Javascript 从服务器端向前端（NodeJS）发送消息,javascript,reactjs,Javascript,Reactjs,我正在尝试从我的服务器端发送一条消息，并在我的前端显示它 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)

我正在尝试从我的服务器端发送一条消息，并在我的前端显示它

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>
    );
}
}

我已经尽了一切努力来显示我使用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>
    );
}
}

好的，经过一些挖掘，我设法解决了这个问题。我想我在这里发布了，以防有人有类似的问题

所以我所做的就是用ExpressValidator检查所有内容，如果有任何问题，将其发送到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(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>
    );
}
}

在react前端，如果收到关于特定字段的任何问题，它将在输入字段的顶部显示。希望这有帮助

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

您是如何向服务器提交表单的？是的，我是我编辑了问题并添加了所有codehttp://localhost:4000/ 可能是另一个域，并且您没有启用CORS。开发人员工具控制台中是否有错误？关于网络选项卡中的请求，它说了些什么？我想提及的一件事是，请将axios.get从构造函数移动到组件。谢谢您帮助我移动axios.get

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);

 };