React JS получить данные с помощью Axios - PullRequest
Новая
       10

React JS получить данные с помощью Axios

0 голосов
/ 06 мая 2020

Я столкнулся с проблемой в React, как получить значение из данных с помощью Ax ios. как я могу получить end_date из json Data.

Data: 

Array[{"id":"1","location_id":null,"staff_id":"1","staff_any":"0","service_id":"1","custom_service_name":null,"custom_service_price":null,"start_date":"2020-05-06 01:00:00","end_date":"2020-05-06 01:15:00" }]

My Code: 

    this.state = {
          data: []
      }


  componentDidMount() {
    axios.get(`http://localhost/babershop_App/wordpress/wp-json/testplugin/v1/testroute`)
      .then(res => {
        const data = res.data;
        this.setState({ data });
      })
  }

render() {    
  return (
      <div>
        <ul>
         {this.state.data.map(data => <li>{data.end_date}</li>)}
        </ul>
      </div>
  )
}

Но мой код не работает, они выдают ошибку

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

Ответы [ 3 ]

0 голосов
/ 06 мая 2020

Возможно, результат, возвращаемый серверной частью, является ошибкой. Попробуйте JSON.parse (data.replace ("Array", "")), конвертируйте data в Array. Или удалите Array в бэкэнде. 

this.setState({ data: JSON.parse (data.replace ("Array", ""))});
0 голосов
/ 06 мая 2020

Если у вас есть ошибка карты, то это потому, что state.data изначально пуст. Попробуйте это ... 

this.state.data?this.state.data.map(()=>{
//...do something
}) : ''

Это потому, что API требуется время, чтобы вернуть ответ

0 голосов
/ 06 мая 2020

Ваша render функция должна проверять случай, когда данные пусты. Примерно так: 

...

render() {
  const { data } = this.state;

  // Checking your data in your console
  console.log('>> Data: ', data);

  
  // Return a custom HTML block for empty data state
  if (!data || data.length === 0)
    return null;
    
  return (
    <div>
      <ul>
       {this.state.data.map(data => <li key={data.id}>{data.end_date}</li>)}
      </ul>
    </div>
  )
}
...