苦手なAPI対応について再入門する②

初期画面は『取得中．．．』というのが出ないように、ボタンを押せば取得中．．．がでるようなコードに変更しました。

 

App.js

import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View, Button } from "react-native";
import { useState, useEffect } from "react";
import axios from "axios";

export default function App() {
  const [joke, setJoke] = useState({ todos: null });

  const [isDone, setIsDone] = useState(false);

  const pressHandler = () => {
    axios
      .then((res) => {
        setJoke({ ...joke, todos: res.data });
      })
      .catch((err) => {
        console.log(err);
      });
    setIsDone(true);
  };

  if (!joke.todos) {
    if (!isDone) {
      return (
        <View style={styles.containerFirst}>
          <Text>下のGETボタンを押してください</Text>
          <Button title="GET" onPress={pressHandler} />
        </View>
      );
    } else {
      return (
        <View style={styles.containerFirst}>
          <Text>取得中...</Text>
          <Button title="GET" onPress={pressHandler} />
        </View>
      );
    }
  } else {
    return (
      <View style={styles.container}>
        <Text style={{ fontSize: 20 }}>setup:</Text>
        <Text>{joke.todos.setup}</Text>
        <Text style={{ fontSize: 20, marginTop: 50 }}>punchline:</Text>
        <Text>{joke.todos.punchline}</Text>
        <StatusBar style="auto" />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "flex-start",
    justifyContent: "center",
  },
  containerFirst: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

 

API処理は非同期処理になるので、

『コールバック関数』『Promise』『async/await』のいずれかの構文を利用すべきでしょう。

下記記事修正して掲載。

yuuzaki2022.hatenablog.com