Question

所以我在将从API检索的数据显示为JSON时遇到问题。下面是代码。当我尝试在渲染函数中显示值时，它不会显示为未定义。

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;

问题是我不认为我完全理解如何从JSON中获取变量并在渲染函数中将它们显示为字符串。

如何显示这些值？

谢谢！

Answer 1

1-您需要将数据从api保存到组件状态，一旦更新组件状态，组件将再次呈现，您将能够看到您的数据。

最好详细了解React和组件state

2-您需要将请求调用移动到componentDidMount生命周期功能，此功能将在安装组件后直接调用，并且您可以更新此功能内的组件状态，这对于避免更新渲染函数内的状态，因为它最终会产生无限渲染调用

阅读有关组件lifecycle

的更多信息也很好

最后，您可以尝试以下方法：

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

按照标准，您将AJAX请求放在componentDidMount中并从那里更新状态。

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

这取决于。如果您不希望这些数据存在于其自己的组件中（例如<CardCount />），则可以将cardCount包含在<h1>标记中，例如：<h1>{cardCount}</h1>。

从JSON检索的render（）中返回显示数据（）

3 个答案: