Can't reach POST RESPONSE json - ReactJS, NodeJS

Question

I've got my own API server which is connected to mysql db. When I send request to server everything is ok, I see input from browser and output from db in console. But I can't see anything new in browser. I want update values, but nothing.Image of browser and server console or When I want to print state it won't get any update

Browser

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;

Server

//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

//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 }

score 1 · Answer 1 · answered Feb 17 '20 at 14:54

1

Check "this.setState({rows})". this is not right. what state are you referring to?

answered Feb 17 '20 at 14:54

reedy

33
7

I repaired it. But my problem is still here. – Matyáš Boreček Feb 17 '20 at 15:03
can you provide the full code for the Browser component? it's really hard to tell what's going on from the above. – reedy Feb 17 '20 at 15:12
If you will want more code so just tell me here. I am going out now. So see you soon :) – Matyáš Boreček Feb 17 '20 at 15:32
I believe [this](https://stackoverflow.com/questions/43638938/updating-an-object-with-setstate-in-react) would help you. – reedy Feb 17 '20 at 15:49
Yeah it's pretty cool but please how can I do async function for updating ? I am totally lost in it... Sorry for my dumb questions. – Matyáš Boreček Feb 18 '20 at 12:32
what exactly do you intend to achieve? the fetch is already async. – reedy Feb 18 '20 at 14:02
Yeah it works, thank you very much. What now with this question ? Can I mark it as completed and select one of your comment ? – Matyáš Boreček Feb 18 '20 at 14:55

score 0 · Answer 2 · answered Feb 17 '20 at 14:56

0

For debugging do a console.log in

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

I.e.

.then(qo => console.log(qo));

answered Feb 17 '20 at 14:56

Cornholio

33
5

I tried to add console.log but I got my normal response only after first render:{AffectedRows: 0, ChangedRows: 0} and []. After next button click nothing happened. – Matyáš Boreček Feb 17 '20 at 15:02

score 0 · Accepted Answer · answered Oct 05 '20 at 07:42

0

I use await keyword and easily wait for the right output. Sorry for my begginer's problems.

answered Oct 05 '20 at 07:42

Matyáš Boreček

55
8

Can't reach POST RESPONSE json - ReactJS, NodeJS

3 Answers3