从JSON检索的render（）中以return（）显示数据

Question

So I'm having a problem displaying data retrieved from an API as JSON. Below is the code. When I try to display the values in the render function, it doesn't display as it is undefined.

import React, { Component } from 'react';

class Test extends Component {

render() {
    var request = require("request");
    var urlCardName = encodeURIComponent(this.props.card.card_name);
    var url = "./query.php?cardName=" + urlCardName;
    request({
        url: url,
        json: true
    }, function (error, response, body) {
        if (!error && response.statusCode === 200) {
            var cardResponse = JSON.stringify(body);
            var cardName = body.cardName.toString();
            var cardCount = body.cardCount.toString();
            console.log(cardCount);
        }
    })

    return(<div>
        Card Count: {cardCount}
        Card Name: {cardName}
    </div>);
}
}
export default Test;

The problem is that I don't think I fully understand how to take variables from JSON and display them as strings in the render function.

How can I display these values?

Thanks!

Answer 1

1- You will need to save data from api into component state, and in react once you update the component state, component will render again and you will be able to see your data.

It is better to read more about React and component state

2- You will need to move your request call to componentDidMount lifecycle function, this function will be called directly after the component is mounted, and you can update the component state inside this function, also it is critical to avoid updating state inside render function as it will end up with infinite render calls

It is also good to read more about component lifecycle

Finally you can try the following:

import React, { Component } from 'react';

class Test extends Component {
  constructor(props) { 
    super(props);
    this.state = {
      cardName: '',
      cardCount: '',
    };
  }

  componentDidMount() {
    var request = require("request");
    var urlCardName = encodeURIComponent(this.props.card.card_name);
    var url = "./query.php?cardName=" + urlCardName;
    request({
        url: url,
        json: true
    }, function (error, response, body) {
        if (!error && response.statusCode === 200) {
            var cardResponse = JSON.stringify(body);
            this.setState( cardName: body.cardName.toString());
            this.setState( cardCount: body.cardCount.toString());
        }
    })
  }

  render() {
    return(<div>
        Card Count: {this.state.cardCount}
        Card Name: {this.state.cardName}
    </div>);
  }
}
export default Test;

Answer 2

By standards, you put AJAX requests in componentDidMount and update the state from there.

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

class Test extends Component {

    constructor(props) {

        super(props);

        this.state = {
            data: null // empty data
        }

    }

    componentDidMount(){

        var urlCardName = encodeURIComponent(this.props.card.card_name);
        var url = "./query.php?cardName=" + urlCardName;
        request({
            url: url,
            json: true
        }, (error, response, body) => {
            if (!error && response.statusCode === 200) {
                var cardResponse = JSON.stringify(body);
                var cardName = body.cardName.toString();
                var cardCount = body.cardCount.toString();

                // Update the state
                this.setState( { cardName, cardCount } );
            }
        })

    }

    render() {

        // Object destructing 
        let { cardName, cardCount } = this.state;

        return (
            <div>
                Card Count: {cardCount}
                Card Name: {cardName}
            </div>
        );
    }
}
export default Test;

Answer 3

It depends. If you don't want that data to live within its own component (ex. <CardCount /> ), you can wrap cardCount in <h1> tags like: <h1>{cardCount}</h1> .