React Native: Isu respons tidak ditentukan yang dihadapi semasa mengakses localhost Symfony API

Question

Saya mempunyai apl yang dibina menggunakan React Native yang berjalan pada komputer tempatan saya dan saya ingin mendapatkan serta memaparkan data daripada API Symfony tempatan saya yang sedang berjalan.

Kod React Native diperoleh daripada IP PC tempatan saya dan port/laluan Symfony:

constructor(props) {
  super(props);
  this.state = {
    isLoading: true,
    dataSource: [],
  }
}

componentDidMount() {
  return fetch('http://10.161.170.86:8000/api/hardwarePlacement')
  .then((response) => {
    console.log(response.ok);
  })
  .then((response) => response.json())
  .then((responseJson) => {
    console.log(response.ok);
    this.setState({
      isLoading: false,
      dataSource: responseJson.hardwarePlacements,
    })
  })
  .catch((error) => {
    console.log(error)
  });
}

Data JSON yang saya dapat daripada API Symfony saya adalah seperti berikut, apabila saya mendapatkannya melalui Posman atau terus melalui penyemak imbas:

[{"id":1,"name":"Bryggers","createdDate":{"date":"2023-02-08 15:14:12.000000","timezone_type":3,"timezone":"Europe\/Berlin"},"editedDate":{"date":"2023-02-14 13:57:07.000000","timezone_type":3,"timezone":"Europe\/Berlin"}},{"id":2,"name":"Stue","createdDate":{"date":"2023-02-08 21:52:46.000000","timezone_type":3,"timezone":"Europe\/Berlin"},"editedDate":{"date":"2023-02-08 21:52:46.000000","timezone_type":3,"timezone":"Europe\/Berlin"}},{"id":3,"name":"Stue","createdDate":{"date":"2023-02-14 13:57:10.000000","timezone_type":3,"timezone":"Europe\/Berlin"},"editedDate":{"date":"2023-02-14 13:57:10.000000","timezone_type":3,"timezone":"Europe\/Berlin"}}]

Ralat yang saya dapat di terminal ialah:

[TypeError: undefined is not an object (evaluating 'response.json')]

Jika saya cuba mendapatkan data daripada URL awam ia berfungsi dengan baik, hanya apabila mendapatkan data daripada URL hos tempatan ia gagal.

Answer 1

Kembali dari yang pertama then

.then((response) => {
    console.log(response.ok);
    return response
  })  
  .then((response) => response.json())