Question

StackoverFlow上的大家好，

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

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

反应本机代码：（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);
  });

React-Native从Rest服务获取JSON并将其存储为状态数组

1 个答案: