Question

我使用可在邮递员（http://lkcfesnotification.000webhostapp.com/api/notifications）中运行的laravel开发了一个api。问题是当我使用示例从此（https://www.youtube.com/watch?v=IuYo009yc8w&t=430s）获取示例时，该示例中api中有一个数组，然后我必须将状态设置为良好的数组，但是当我尝试使用以下代码时，它不会呈现到它没有在api中使用数组，例如随机用户api的结果是[结果]：[项目]，而我的一个是“数据”：[我的项目]

  fetchData = async () => {
    const response = await fetch("https://randomuser.me/api?results=500");
    const json = await response.json();
    this.setState({ data: json.results });
  };

如果我使用它可以工作，但是由于我正在做一些家庭作业，我想使用下面的代码

type Props = {};
export default class IndexScreen extends Component<Props> {
...
    this.state = {
      data: [],
      isFetching: false,
    };

    _load() {
    let url = "http://lkcfesnotification.000webhostapp.com/api/notifications";

    this.setState({isFetching: true});

    fetch(url)
    .then((response) => {
      if(!response.ok) {
        Alert.alert('Error', response.status.toString());
        throw Error('Error ' + response.status);
      }

      return response.json()
    })
    .then((members) => {
      this.setState({data});
      this.setState({isFetching: false});
    })
    .catch((error) => {
      console.log(error)
    });
  }

https://imgur.com/a/he5mNXv这是我的渲染结果我得到的代码是空白正在加载

Answer 1

根据代码片段，您不使用获取的数据将其设置为您的状态：

    .then((members) => {
      this.setState({data});
      this.setState({isFetching: false});
    })

members是您提取的json的结果。因此，可以将members重命名为data或使用data: members。如果代码应该像您的第一个函数一样工作，则可能是data: members.result。您还可以将两个setState呼叫合并为一个呼叫：

      this.setState({
           data: members.result,
           isFetching: false,
      });

Answer 2

获取请求有效，但是您没有在正确的状态属性中保存正确的数据。

问题位于以下部分：

.then((members) => {
    this.setState({data});
    this.setState({isFetching: false});
})

您正在将响应分配给变量members，但保存了另一个变量data，该变量不存在。

此外，响应是一个对象，它具有比数据更多的信息，因此您所寻找的只是响应的data属性。

这应该有效：

.then(({ data }) => {
    this.setState({data});
    this.setState({isFetching: false});
})

在这里，我们将响应分解为变量{ data }，以解决您的问题。

由于数组反应本机，无法获取API

2 个答案: