从API响应输出JSON

我已经设法从我创建的api中获取JSON，但是我在实际呈现JSON时遇到了困难。我已经通过“stringify”在控制台中输出了它，但是我似乎无法实际将JSON呈现给页面

import React, { Component } from 'react';
import './App.css';
import $ from 'jquery';

function getData() {
  return $.ajax({
    type: "GET",
    url: 'http://localhost:3001/data',
    data: {},
    xhrFields: {
      withCredentials: false
    },
    crossDomain: true,
    dataType: 'json',
    success: handleData
  });
}
function handleData(data /* , textStatus, jqXHR */ ) {
  console.log(JSON.stringify(data));
  return JSON.stringify(data);
}

class App extends Component {
  render() {
    return (
      <div className="App">
        <header>
          <h2>Last Application Deployment </h2>
        </header>
        <div id='renderhere'>
          {JSON.stringify(getData().done(handleData))}
        </div>
      </div>
    );
  }
}

export default App;

import React，{Component}来自'React'；
导入“/App.css”；
从“jquery”导入美元；
函数getData（）{
返回$.ajax({
键入：“获取”，
网址：'http://localhost:3001/data',
数据：{}，
xhrFields：{
withCredentials:false
},
跨域：是的，
数据类型：“json”，
成功：handleData
});
}
函数handleData（数据/*，文本状态，jqXHR*/）{
log（JSON.stringify（data））；
返回JSON.stringify（数据）；
}
类应用程序扩展组件{
render（）{
返回(
上次应用程序部署
{JSON.stringify（getData（）.done（handleData））}
);
}
}
导出默认应用程序；

您不能在render方法中执行函数作为返回。您可以使用react生命周期并将结果存储在如下状态=>

class App extends Component {

      state = {result : null}          

      componentDidMount = ()=>{

        $.ajax({
           type: "GET",
           url: 'http://localhost:3001/data',
           data: {},
           xhrFields: {
             withCredentials: false
           },
           crossDomain: true,
           dataType: 'json',
           success: (result)=>{
              this.setState({result : result}); 
           }
         });

      };

      render() {
        return (
          <div className="App">
            <header>
              <h2>Last Application Deployment </h2>
            </header>
            <div id='renderhere'>
              {this.state.result && and what you want because i dont                                  know why you want use JSON.stringfy - you use .map() or ...}
            </div>
          </div>
        );
      }
    }

类应用程序扩展组件{
状态={result:null}
componentDidMount=（）=>{
$.ajax({
键入：“获取”，
网址：'http://localhost:3001/data',
数据：{}，
xhrFields：{
withCredentials:false
},
跨域：是的，
数据类型：“json”，
成功：（结果）=>{
this.setState（{result:result}）；
}
});
};
render（）{
返回(
上次应用程序部署
{this.state.result&&以及您想要什么，因为我不知道您为什么要使用JSON.stringfy-您使用.map（）或…}
);
}
}

---

我建议您查看文章和。

我已经演示了如何解决此问题：。AJAX请求不应在render方法中发出，而应在

componentDidMount（）

lifecycle方法中发出。另外，最好将响应存储在state中。请参见React文档中的指南：

获取componentDidMount中的数据。当响应到达时，以状态存储数据，触发渲染以更新UI

以下是完整的代码：

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      time: '',
      string: ''
    };
  }

  componentDidMount() {
    $.ajax({
      type: "GET",
      url: 'http://date.jsontest.com/'
    })
      .then(response => {
        this.setState({
          time: response.time,
          string: JSON.stringify(response)
        });
    })
  }

  render() {
    return (
      <div className="App">
        <header>
          <h2>Last Application Deployment </h2>
        </header>
        <div id='renderhere'>
          Time: {this.state.time} <br /><br />
          String: {this.state.string}
        </div>
      </div>
    );
  }
}


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

类应用程序扩展了React.Component{
构造函数（）{
超级（）；
此.state={
时间：''，
字符串：“”
};
}
componentDidMount（）{
$.ajax({
键入：“获取”，
网址：'http://date.jsontest.com/'
})
。然后（响应=>{
这是我的国家({
时间：response.time，
string:JSON.stringify（响应）
});
})
}
render（）{
返回(
上次应用程序部署
时间：{this.state.Time}


字符串：{this.state.String}
);
}
}
ReactDOM.render(
，document.getElementById（'content'））
);