React JS 解析 JSON 中的數據

Question

我在 React JS 數據解析中遇到問題，我想從 JSON 數據中獲取start_date

我的代碼

//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>

只需使用約會數據：[] 初始化 state，以便在第一次渲染時它包含一個空數組而不是未定義。

錯誤未處理拒絕（TypeError）：this.state.appointmentdata.map 不是 function

結果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

看起來您的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 is undefined ，所以它找不到.map ZC1C425268E67A9。

要解決此問題，您可以替換：

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

或者只是用 Appointmentdata appointmentdata: []初始化state ，以便在第一次渲染時它包含一個空數組而不是undefined 。

Answer 2

給你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 {約會數據：[] };