Используя запрос, получите JSON и используйте его в моем компоненте React.

Я пытаюсь получить доступ к данным JSON с помощью функции Jquery $.getJSON в моем компоненте React, но продолжаю получать эту ошибку:

Нарушение инварианта: ошибка Minified React № 31; посетите http://facebook.github.io/react/docs/error-decoder.html?invariant=31&args[]=object%20with%20keys%20%7Busername%2C%20img%2C%20alltime%2C%20recent%2C%20lastUpdate%7D&args[]= для получения полного сообщения или используйте неминифицированную среду разработки для получения полного сообщения об ошибках и дополнительных полезных предупреждений.

Объекты недействительны в качестве дочерних элементов React (найдено: объект с ключами {имя пользователя, img, все время, недавнее, последнее обновление}).

Это мой код здесь. Не совсем знаю, в чем проблема.....

class Board extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      first: '',
      second: ''
    }
  }
  componentDidMount() {
    var self = this;
    $.getJSON("https://fcctop100.herokuapp.com/api/fccusers/top/recent",function(data){
      self.setState({first:data});
      console.log(this.state.first);
    });
  }
  render() {
    return (<div>
      <pre>{this.state.first}</pre>
      <pre>{this.state.second}</pre>
      </div>)
  }

}

ReactDOM.render(<Board />, document.getElementById('mine'));

reactjs json jquery
person Philipl    schedule 02.02.2017    source источник
comment
Как насчет того, чтобы сохранить файл JSON закодированным, а затем декодировать его в render()? В противном случае взгляните сюда: stackoverflow.com/questions/37997893/   -  person Theraloss    schedule 02.02.2017
comment
Прочитав вашу ссылку,я разобрался в проблеме!Спасибо!   -  person Philipl    schedule 02.02.2017

Ответы (1)


arrow_upward
1
arrow_downward

Вы не можете визуализировать массив объектов. React умеет рендерить компоненты. Решение состоит в том, чтобы сопоставить массив, полученный из ответа XHR, и отобразить каждый отдельный объект.

Ваша функция рендеринга должна выглядеть так:

class Board extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      first: [],
      second: []
    }
  }
  componentDidMount() {
    var self = this;
    $.getJSON("https://fcctop100.herokuapp.com/api/fccusers/top/recent",function(data){
      console.log(data)
      self.setState({first:data});
    });
  }
  render() {
    return (
      <div>
            {this.state.first.map((el, i) => <pre key={i}>{JSON.stringify(el, null, ' ')}</pre>)}
      </div>
    )
  }
}

ReactDOM.render(<Board />, document.getElementById('container'));

Также обратите внимание, что я изменил начальное состояние на пустой массив (чтобы иметь возможность отображать его)

person Alessandro Arnodo    schedule 02.02.2017
comment
да, спасибо за правильную концепцию! Я понял, в чем проблема! На самом деле я просто хочу увидеть результаты на ‹pre›, поэтому я использую JSON.stringify для решения проблемы. - person Philipl; 02.02.2017