Невозможно связаться с ПОЧТОВЫМ ОТВЕТОМ json - ReactJS, NodeJS - PullRequest
Новая
       13

Невозможно связаться с ПОЧТОВЫМ ОТВЕТОМ json - ReactJS, NodeJS

0 голосов
/ 17 февраля 2020

У меня есть свой собственный сервер API, который подключен к mysql дБ. Когда я отправляю запрос на сервер, все в порядке, я вижу ввод из браузера и вывод из db в консоли. Но я не вижу ничего нового в браузере. Я хочу обновить значения, но ничего. Изображение браузера и консоли сервера или Когда я хочу напечатать состояние, оно не получит никакого обновления

Браузер 

import React, {Component} from 'react';
import './data_table.css';

class DataTable extends Component {
    constructor (props) {
        super(props);
        this.keys = [];

        this.state = {
            rows: {},
            queryOutput: [],
        }
    }

    componentDidMount(){
        //Fetching number of affected and changed rows
        fetch('/api/update')
            .then(res => res.json())
            .then(rows => {this.setState({rows: rows})
            console.log(rows)});

        //Fetching output from user query
        fetch('/api/query',
            {
                method: "POST",
                headers: {
                    'Content-Type': 'application/json'
                },
            })
            .then(res => res.json())
            .then(qo =>{ this.setState({queryOutput: qo})
            console.log(qo)});
    }

    getReadyTable(){
        let objectToPrint;

        if(this.state.queryOutput[0]) {
             objectToPrint = this.state.queryOutput;

            this.keys = Object.keys(objectToPrint[0]);
            return (
                <table className={'output'}>
                    <thead>
                    <tr>{this.keys.map((key, val) => <th key={val}>{key}</th>)}</tr>
                    </thead>
                    <tbody>
                    {objectToPrint.map((obj, val) => <tr key={val}>{this.keys.map((key, idx) => <td
                        key={idx}>{obj[key]}</td>)}</tr>)}
                    </tbody>
                </table>
            );
        }
            else{
                objectToPrint = this.state.rows;
                this.keys = Object.keys(objectToPrint);
                return (
                    <table className={'output'}>
                        <thead ><tr >{this.keys.map( (key, val) =>  <th key={val}>{key}</th> )}</tr></thead>
                        <tbody><tr >{Object.values(objectToPrint).map( (obj, val) => <td key={val}>{obj}</td>)}</tr></tbody>
                    </table>

                );
            }

    }

    render() {

        return (
     <div>
    {this.getReadyTable()}
            </div>
        );
    }
}

export default DataTable;

Сервер 

//Some requires and uses...
app.post('/api/query', (req, res) => {
  console.log(`\n  Query input : ${JSON.stringify(req.body)}`);
  let queryInput = (Object.values(req.body).join(' '));

    if(queryInput.length>4){//provisional condition
      res.json(dbApi.queryFromUser(queryInput));
    }

    else{
      res.json(dbApi.queryOutput);
    }
});

MySQL соединение 

//Connection and others...
    const receivingQuery =(queryInput) => {
        db.query(queryInput, (err, result) =>{
            if(err) throw err+' : '+queryInput;

            queryOutput = result;
            console.log("\nQuery output "+ JSON.stringify(queryOutput));
        });
        return queryOutput;
    }

module.exports={ queryFromUser: receivingQuery }

Ответы [ 2 ]

0 голосов
/ 17 февраля 2020

Для отладки выполните console.log в 

.then(qo => this.setState({queryOutput: qo}));

Т.е. 

.then(qo => console.log(qo));
0 голосов
/ 17 февраля 2020

Проверьте "this.setState ({row})". это неправильно. в каком состоянии вы говорите?

...