Блог

Я пытаюсь взять json список, который я получил от API, и хочу отобразить этот json список в браузере. Я выяснил, как извлекать данные из REST API в серверной части, теперь я хочу взять этот json список и отобразить его в браузере. Вот что я узнал и что я попробовал:

 import React from 'react';

export default class peopleList extends React.Component {
    state = {
        values: []
    }
    componentDidMount() {
       fetch('http://localhost:3005/people')
        .then(function(res) {
            return res.json();
        }).then(function(json) {
            this.setState({
               values: json
            })
        });
    }
    render(){
        return <div className="drop-down">
            <p>I would like to render json list on the browser </p>
              <select>{
                 this.state.values.map((obj) => {
                     return <option value={obj.id}>{obj.name}</option>
                 })
              }</select>
            </div>;
    }
}
 

Желаемый результат:

Я создал простую рамку панели, в которую я хочу поместить данные списка json. для простоты я просто хочу пока отображать каждую строку. Как я могу это сделать? может кто-нибудь указать мне, как сделать это более эффективно? Спасибо

в этом прикрепленном выводе я использовал пример фрейма панели, в котором я хочу поместить свой список json на панель. Хотя я признаю, что данные настолько разные.

Не видя точно, что здесь происходит, и вы не публикуете фактический код и вывод json, который вы используете, все, что я могу сделать, это догадаться, в чем проблема.

Во-первых, опубликованный вами вывод json отличается от значений, которые вы пытаетесь получить. В опубликованном вами выводе json нет имени или значения идентификатора.

Далее в вашей componentDidMount() функции лучше всего использовать функцию arrow для привязки к классу.

Следующие компоненты react должны иметь заглавные буквы для первой буквы имени компонентов, поэтому <peopleList/> они будут восприниматься как html-элемент, а не как компонент react. Если вы не получаете никаких ошибок в своей консоли, это может быть проблемой.

И тогда вы, возможно, не получаете правильный json из своего api или вообще не получаете json или не регистрируете его в состоянии. Попробуйте записать состояние в консоль после рендеринга и посмотреть, был ли json отправлен в значения в вашем состоянии. Если это так, убедитесь, что вы получаете правильную разметку json и что ваши значения верны.

Есть несколько других, которые могут быть проблемой, но это основные. Я собрал пример, который вы можете увидеть по следующей ссылке Json Output Example CodeSandbox убедитесь, что вы посетили этот пример и сравнили с вашим кодом. Слева откройте компонент PeopleList.

Для вашего варианта использования я бы установил в вашем родительском компоненте список пользователей как <PeopleList/> , и тогда ваш компонент будет выглядеть примерно так:

 import React from "react";

export default class PeopleList extends React.Component {
  state = {
    values: []
  };
  componentDidMount() {
    fetch("http://localhost:3005/people")
      .then(res => res.json())
      .then(json => {
        this.setState({
          values: json
        });
      });
  }
  render() {
    return (
      <div className="drop-down">
        <p>I would like to render json list on the browser </p>
        <select>
          {this.state.values.map(obj => {
            return (
              <option key={obj.id} value={obj.id}>
                {obj.name}
              </option>
            );
          })}
        </select>
      </div>
    );
  }
}
 

Кроме того, если вы используете вывод json, который вы опубликовали выше, вы должны использовать следующее:

 <option key={obj.uin} value={obj.uin}>
  {obj.studentInfo.FirstName}
</option>
 

Если у вас есть какие-либо другие вопросы, дайте мне знать.

В примере, который вы опубликовали, вы визуализируете a select с помощью группы options с неопределенными значениями. Похоже, это не соответствует вашим данным или вашему вопросу.

Используя предоставленные вами данные, вот элементарный способ перебора результатов и их печати, а также перебора каждого реквизита в объектах.

https://jsfiddle.net/reergymerej/kmL84hvy/1/

Если ваша реальная цель — просто распечатать данные в компоненте для быстрой отладки, вы можете сделать что-то вроде этого.

 render() {
  return (
    <div>{JSON.stringify(this.props)}</div>
  )
}
 

Это дешевый способ увидеть, какие реквизиты получает ваш компонент. Вместо этого вам следует ознакомиться с инструментами React Dev и научиться изучать компоненты с большей гибкостью. За исключением этого, хорошая console.log отладка ole — это костыль, который мы все используем здесь и там.

Если вы хотите получить лучшую и быструю помощь, попробуйте уточнить свои результаты. Добавьте снимки экрана и попытайтесь объяснить, что вы видите и чем это отличается от того, что вы ожидаете. Для устранения неполадок обычно лучше больше информации, чем меньше.

Не похоже, что эти данные содержат то, что вы запрашиваете (идентификатор и имя). Я немного новичок в JSX, но я думаю, что то, что вы, возможно, ищете, приведено ниже в виде обновления синтаксиса и обновления обозначения свойств.

 return (
        <div className="drop-down">
        <p>I would like to render json list on the browser </p>
          <select>
           {this.state.values.map(obj => (
               <option value={obj.uin}>{obj.studentInfo.firstName}</option>
            ))}
          </select>
        </div>;
);