React JS парсинг данных в JSON

Question

У меня проблема с анализом данных React JS, я хочу получить start_date из JSON данных

Мой код

//fetch appointment data
  componentDidMount() {
    axios.get(`http://localhost/v1/appointments`)
    .then(res => {
      const appointmentdata = res.data;
      console.log(appointmentdata);          //result
      //this.setState({ appointmentdata: JSON.parse (appointmentdata.replace ("Array", ""))});

      this.setState({ appointmentdata });
    })
    }

компонент реакции:

<div className="col-lg-3">
          {this.state.appointmentdata.map(data => <p>{data.start_date}</p>) }
                    </div>

просто инициализируйте состояние с помощью assigndata: [], чтобы при первом рендеринге оно содержало пустой массив вместо неопределенного.

Ошибка Необработанное отклонение (TypeError) : this.state.appointmentdata.map не является функцией

результат console.log(appointmentdata)

<div id="root" style="border: 1px solid red; padding : 25px; width: 800px;">This is 'root' div.</div>
-->      
    [{"id":"1","start_date":"2020-05-09 15:30:00","end_date":"2020-05-09 16:00:00", "cust_email":"admin@gmail.com"},{"id":"2","start_date":"2020-05-09 00:00:00","end_date":"2020-05-09 00:30:00","cust_full_name":"mubeen","cust_email":""}]

Как я могу получить значение start_date.

Что мне делать? Кто-нибудь мне поможет?

Answer 1

Здесь вы go с решением

<div className="col-lg-3">
  {
    this.state.appointmentdata.length &&
    this.state.appointmentdata.map(data => 
     <p>{data.start_date}</p>) 
  }
</div>

Сначала проверьте длину, а затем начните цикл, используя .map.

Нет необходимости делать this.setState({ appointmentdata: JSON.parse (appointmentdata.replace ("Array", ""))});

Вместо этого вы можете сделать это, если получаете данные в виде массива объектов.

this.setState({ appointmentdata });

Еще одна вещь, appointmentdata следует определять как [] this.state {assigndata: []} ;

Answer 2

Похоже, что ваш appointmentdata уже был проанализирован, поэтому просто замените:

this.setState({ appointmentdata: JSON.parse(appointmentdata.replace ("Array", ""))});

на:

this.setState({ appointmentdata });

Теперь он не работает, потому что вы передаете массив в JSON.parse(), но он ожидает строку, содержащую действительный JSON:

// This works:

console.log(JSON.parse(`[{
  "id": "1",
  "start_date": "2020-05-09 15:30:00",
  "end_date": "2020-05-09 16:00:00",
  "cust_email": "admin@gmail.com"
}, {
  "id": "2",
  "start_date": "2020-05-09 00:00:00",
  "end_date": "2020-05-09 00:30:00",
  "cust_full_name": "mubeen",
  "cust_email":""
}]`));

// This doesn't work:

console.log(JSON.parse([{
  "id": "1",
  "start_date": "2020-05-09 15:30:00",
  "end_date": "2020-05-09 16:00:00",
  "cust_email": "admin@gmail.com"
}, {
  "id": "2",
  "start_date": "2020-05-09 00:00:00",
  "end_date": "2020-05-09 00:30:00",
  "cust_full_name": "mubeen",
  "cust_email":""
}]));

.as-console-wrapper {
  max-height: 100% !important;
}

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

Чтобы исправить это, вы можете заменить:

{ this.state.appointmentdata.map(data => <p>{ data.start_date }</p>) }

на:

{ (this.state.appointmentdata || []).map(data => <p>{ data.start_date }</p>) }

Или:

{ this.state.appointmentdata?.map(data => <p>{ data.start_date }</p>) }

Или просто инициализируйте state с помощью appointmentdata: [], чтобы при первом рендеринге он содержал пустой массив вместо undefined.