Question

我想列出正在使用的API中的数据。但是我遇到了错误。

    // Here I'm getting the data.
    componentWillMount() {
    tokenner()
      .then(responseJson => {
        const token = "Bearer " + responseJson.result.token;
        this.setState({ token });
        fetch(
          "myapiurl//notimportant",
          {
            method: "GET",
            headers: {
              Accept: "application/json",
              "Content-Type": "application/json",
              Authorization: token
            }
          }
        )
          .then(response => response.json())
          .then(responseData => {
            this.setState({
              isLoading: false,
              dataSource: responseData.result
            });
          });
      })
      .catch(error => console.warn(error));
  }

然后我使用以下代码列出我得到的数据：

render() {
if (this.state.isLoading) {
  return (
    <View style={styles.container}>
      <ActivityIndicator />
    </View>
  );
} else {
  console.warn(this.state.dataSource) // I got the data. Everything ok.
  this.state.dataSource.map((val, key) => {
    return ( // There was no data returned error.
      <View key={key} style={styles.item}>
      <Text>{val.id}</Text>
      <Text>{val.name}</Text>
      <Text>{val.surname}</Text>
      <Text>{"Sıra" + key}</Text>
      </View>
    );
  });
}

} }

错误： The Error

当我不使用循环而打印结果时，程序不会产生错误。我该怎么办？

Answer 1

您不会返回地图的输出，即

return this.state.dataSource.map((val, key) => {
  return (
    <View key={key} style={styles.item}>
      <Text>{val.id}</Text>
      <Text>{val.name}</Text>
      <Text>{val.surname}</Text>
      <Text>{"Sıra" + key}</Text>
    </View>
  );
});

内部return语句用于在dataSource中的每个项目上运行的函数，但是随后您需要return构建的数组

Answer 2

map()方法创建一个新数组，其结果是在调用数组中的每个元素上调用提供的函数。

this.state.dataSource.map((val, key) => {
    return (
      <View key={key} style={styles.item}>
        <Text>{val.id}</Text>
        <Text>{val.name}</Text>
        <Text>{val.surname}</Text>
        <Text>{"Sıra" + key}</Text>
      </View>
    );
  });

^这实际上是一个元素数组。您必须在渲染器中返回此值

render(){
 ......
 return this.state.dataSource.map((val, key) => {
    return (
      <View key={key} style={styles.item}>
        <Text>{val.id}</Text>
        <Text>{val.name}</Text>
        <Text>{val.surname}</Text>
        <Text>{"Sıra" + key}</Text>
      </View>
    );
  });
}

Answer 3

您尝试过吗？您忘了返回else语句

...
 return this.state.dataSource.map((val, key)
....

如何在React Native中使用循环列出

3 个答案: