Как составить список с использованием циклов в React Native

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>
    );
  });
}

} }

ошибка: Ошибка

Программа не выдает ошибку, когда я печатаю результат без использования цикла. Что мне делать?

Answer 1

Вы пробовали это? Вы забыли вернуться в операторе else

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

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

Вы не возвращаете вывод своей карты, т.е.

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>
  );
});

Внутренний оператор возврата предназначен для функции, которая выполняется для каждого элемента в dataSource, но затем вам нужно return массив, который был построен