React-Native 从 rest 服务获取 JSON 并将其存储为 state 中的数组

Question

大家好 StackoverFlow，

我正在开发一个后端 (Laravel) 和一个前端 (React-Native)。问题出在前端，我试图将 JSON 响应分配给状态。但由于某种原因，我不能将“this.state.data”设置为一个数组，因为它始终是一个字符串，而不是一个对象，我一次得到一个字符。

我想将数据设置为 API 响应中所有路由的数组。

React-Native 代码：（OBS：由于服务器处于开发模式，URL 已删除）

async getData() {
var token =  await AsyncStorage.getItem("token");
this.setState({ "token": token });

fetch('myurl', {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    token: this.state.token
  })
}).then((response) => {

    if (response != null) {
      //console.log(response.json());
      console.log(response);

      this.setState({
        //data: response._bodyInit,
        data: JSON.stringify(response._bodyInit),
        loading: false
      });
    }
    return this.state.data;
  })
  .catch((error) => {
    console.error(error);
  });

}

URL 响应结构如下所示：

{
    routes: [
      {
        id: '15',
        uuid: '26-10-2018',
        start_address: 'Krogshøj Alle 3',
        end_address: 'Lindevangs Alle 16',
        arrival: '27-10-2018 10:00',
      },
      ...
      ]
 }

如果我像这样对数据进行硬编码，它就可以工作。

this.setState({
  data: 
    [
      {
        id: '15',
        uuid: '26-10-2018',
        start_address: 'Krogshøj Alle 3',
        end_address: 'Lindevangs Alle 16',
        arrival: '27-10-2018 10:00',
      },
    ]
});

这是我使用数据的地方：

return (
  <View style={styles.container}>
    <Toolbar
      isHidden={phase !== 'phase-0'}
      onBackPress={this.onBackPressed}
    />

    <FlatList
      key={item => item.id}
      data={this.state.data}
      dataExtra={{ phase, opacityOfSelectedItem }}
      keyExtractor={item => item.id}
      renderItem={this.renderItem}
    />

  </View>
);

Answer 1

fetch('myurl', {
  method: 'POST',
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    token: this.state.token,
  }),
})
  .then(response => response.json())
  .then((data) => {
    this.setState({
      data: data.routes,
      loading: false,
    });
  })
  .catch((error) => {
    console.error(error);
  });