时间戳

首页 > 解决方案 > React JS 使用 Axios 获取数据

arrays - React JS 使用 Axios 获取数据

问题描述

我在 React 中遇到了一个问题，如何使用 Axios 从数据中获取价值。我如何从 json 数据中获取 end_date。

数据：

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" }]

我的代码：

    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>
  )
}

但是我的代码不起作用，他们给出了错误

我应该怎么办？谁能帮我？

标签： arraysjsonreactjsobjectaxios

解决方案

您的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>
  )
}

推荐阅读