Блог

Мне удалось получить JSON из моего созданного мной API, однако у меня возникли проблемы с фактическим отображением этого 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;
  

вы не можете выполнить функцию в методе render в ответ.вы можете использовать жизненные циклы реакции и сохранять результат в таком состоянии =>

 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 amp;amp; and what you want because i dont                                  know why you want use JSON.stringfy - you use .map() or ...}
            </div>
          </div>
        );
      }
    }
  

Я предлагаю вам ознакомиться с этой статьей и этим.

Я сделал демонстрацию того, как вы можете решить эту проблему: http://codepen.io/PiotrBerebecki/pen/amLxAw . Запрос AJAX должен выполняться не в методе render, а в componentDidMount() методе жизненного цикла. Кроме того, лучше всего хранить ответ в состоянии. Пожалуйста, ознакомьтесь с руководством в документах React: https://facebook.github.io/react/tips/initial-ajax.html

Извлекать данные в componentDidMount. Когда придет ответ, сохраните данные в состоянии, запустив рендеринг для обновления вашего пользовательского интерфейса.

Вот полный код:

 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')
);