Question

我一直在努力学习成为一名全栈Web开发人员。我决定使用MERN堆栈。我正在尝试编写我的第一个“全栈”应用程序。但是我似乎无法弄清楚如何存储来自我的get调用的数据并将其作为属性提交给类。 get调用将到达我在nodejs中设置的终点，它将调用Mongo并返回一个数字数组。下面的get调用工作，因为我可以console.log该数组中的元素数量。我已经尝试了许多不同的方法，但我似乎无法弄清楚如何将数字从THEN承诺中提取出来并进入我的班级以显示在屏幕上。任何帮助将不胜感激！

const React = require('react');
const ReactDOM = require('react-dom');
const axios = require('axios');

//call with npm build 




    var num = axios.get('/api').then(result => {
                  console.log(result.data.length)
                  return result.data.length;
              })

//Only show how many unused coupons are left. 

var Message = React.createClass({

  render: function () {

    return <h1>There are {this.props.number} coupons left!</h1>

  }//end of of render outer function
})

ReactDOM.render(<Message number={num} />,document.getElementById('content'))

Answer 1

首先，api调用是异步操作，不能以同步方式调用。

而且，axios.get函数不会返回从api值派生而是返回Promise，它会解析此值。

正确的解决方案是创建<App />组件并在componentDidMount生命周期回调中调用api，在成功响应时设置相应的状态变量，并渲染<Message />组件，为其提供此变量。

看一下例子：

var App = React.createClass({
  getInitialState() {
    return {
      num: null
    };
  }

  componentDidMount() {
    var num = axios.get('/api').then(result => {
      this.setState({ num: result.data.length });
    });
  },

  render() {
    if (this.state.num) {
      return <Message number={this.state.num} />
    }
    return <div />
  }
});

ReactDOM.render(<App />,document.getElementById('content'))

提交Get call for result class的结果

1 个答案: