无法使用来自 API 的 Axios 在 React Native 中查看数据

Question

我在 TSX 的这个 Class 组件中使用 Axios 从我的 API 检索我的数据。它没有给出任何错误，它只是不显示我的图像，甚至不显示 console.log 中的数据。我现在在 tsx 中使用 class 组件，因为在我之前尝试让动画滑块工作时，我使用了：jsx 中的 Class 组件，tsx 中的 Class 组件，JSX 中的函数钩子以及 TSX。每次尝试都会出现我无法解决的不同错误，这就是我现在使用此策略的原因，我想我现在已经接近解决方案了，只是没有查看数据。

提前致谢

class MyComponent extends Component {
  componentDidMount() {
    LogBox.ignoreLogs(['Animated: `useNativeDriver`'])
  }

  position
  rotate: number
  rotateAndTranslate
  likeOpacity
  dislikeOpacity
  nextCardOpacity
  nextCardScale
  PanResponder

  imagesData: Images[]

  mySpecialFunction() {
    console.log('Images data:', this.imagesData)
  }

  constructor(props) {
    super(props)

    LogBox.ignoreLogs(['Animated: `useNativeDriver`'])

    axios
      .get<Images[]>(
        'https://api.thecatapi.com/v1/images/search?breed_ids=beng&include_breeds=true',
      )
      .then((response: AxiosResponse) => {
        this.imagesData = response.data
      })

    this.position = new Animated.ValueXY()
    this.state = {
      currentIndex: 0,
    }
    this.rotate = this.position.x.interpolate({
      inputRange: [-SCREEN_WIDTH / 2, 0, SCREEN_WIDTH / 2],
      outputRange: ['-30deg', '0deg', '10deg'],
      extrapolate: 'clamp',
    })
    this.rotateAndTranslate = {
      transform: [
        {
          rotate: this.rotate,
        },
        ...this.position.getTranslateTransform(),
      ],
    }
    this.likeOpacity = this.position.x.interpolate({
      inputRange: [-SCREEN_WIDTH / 2, 0, SCREEN_WIDTH / 2],
      outputRange: [0, 0, 1],
      extrapolate: 'clamp',
    })
    this.dislikeOpacity = this.position.x.interpolate({
      inputRange: [-SCREEN_WIDTH / 2, 0, SCREEN_WIDTH / 2],
      outputRange: [1, 0, 0],
      extrapolate: 'clamp',
    })
    this.nextCardOpacity = this.position.x.interpolate({
      inputRange: [-SCREEN_WIDTH / 2, 0, SCREEN_WIDTH / 2],
      outputRange: [1, 0, 1],
      extrapolate: 'clamp',
    })
    this.nextCardScale = this.position.x.interpolate({
      inputRange: [-SCREEN_WIDTH / 2, 0, SCREEN_WIDTH / 2],
      outputRange: [1, 0.8, 1],
      extrapolate: 'clamp',
    })
  }
  UNSAFE_componentWillMount() {
    this.PanResponder = PanResponder.create({
      onStartShouldSetPanResponder: (evt, gestureState) => true,
      onPanResponderMove: (evt, gestureState) => {
        this.position.setValue({ x: gestureState.dx, y: gestureState.dy })
      },
      onPanResponderRelease: (evt, gestureState) => {
        if (gestureState.dx > 120) {
          Animated.spring(this.position, {
            toValue: { x: SCREEN_WIDTH + 100, y: gestureState.dy },
            useNativedriver: true,
          }).start(() => {
            this.setState({ currentIndex: this.state.currentIndex + 1 }, () => {
              this.position.setValue({ x: 0, y: 0 })
            })
          })
        } else if (gestureState.dx < -120) {
          Animated.spring(this.position, {
            toValue: { x: -SCREEN_WIDTH - 100, y: gestureState.dy },
            useNativedriver: true,
          }).start(() => {
            this.setState({ currentIndex: this.state.currentIndex + 1 }, () => {
              this.position.setValue({ x: 0, y: 0 })
            })
          })
        } else {
          Animated.spring(this.position, {
            toValue: { x: 0, y: 0 },
            friction: 4,
            useNativedriver: true,
          }).start()
        }
      },
    })
  }
  renderUsers = () => {
    if (this.imagesData) {
      return this.imagesData
        .map((item, i) => {
          if (i < this.state.currentIndex) {
            return null
          } else if (i == this.state.currentIndex) {
            return (
              <Animated.View
                {...this.PanResponder.panHandlers}
                key={item.id}
                style={[
                  this.rotateAndTranslate,
                  {
                    height: SCREEN_HEIGHT - 120,
                    width: SCREEN_WIDTH,
                    padding: 10,
                    position: 'absolute',
                  },
                ]}
              >
                <Animated.View
                  style={{
                    opacity: this.likeOpacity,
                    transform: [{ rotate: '-30deg' }],
                    position: 'absolute',
                    top: 50,
                    left: 40,
                    zIndex: 1000,
                  }}
                >
                  <Text
                    style={{
                      borderWidth: 1,
                      borderColor: 'green',
                      color: 'green',
                      fontSize: 32,
                      fontWeight: '800',
                      padding: 10,
                    }}
                  >
                    LIKE
                  </Text>
                </Animated.View>
                <Animated.View
                  style={{
                    opacity: this.dislikeOpacity,
                    transform: [{ rotate: '30deg' }],
                    position: 'absolute',
                    top: 50,
                    right: 40,
                    zIndex: 1000,
                  }}
                >
                  <Text
                    style={{
                      borderWidth: 1,
                      borderColor: 'red',
                      color: 'red',
                      fontSize: 32,
                      fontWeight: '800',
                      padding: 10,
                    }}
                  >
                    NOPE
                  </Text>
                </Animated.View>
                <Image
                  style={{ height: '86%', width: null, borderRadius: 10 }}
                  source={{ uri: `${item.url}` }}
                />
                <View
                  style={{
                    backgroundColor: '',
                    color: 'black',
                    fontSize: 20,
                    fontWeight: '800',
                    position: 'absolute',
                    bottom: 95,
                    right: 40,
                    zIndex: 1000,
                    width: '85%',
                    height: '20%',
                    borderRadiusTop: 20,
                  }}
                >
                  <Text
                    style={{ color: 'white', fontSize: 32, fontWeight: '800' }}
                  >
                    Black cat
                  </Text>
                  <Text
                    style={{ color: 'white', fontSize: 18, fontWeight: '600' }}
                  >
                    Black cat family
                  </Text>
                  <View style={styles.iconen}>
                    <Ionicons style={styles.icon} name="timer" />
                    <Text style={styles.subtitle}>
                      {item.breeds[0].life_span}
                    </Text>
                    <Ionicons style={styles.icon} name="barbell-outline" />
                    <Text style={styles.subtitle}>
                      {item.breeds[0].weight.metric}
                    </Text>
                    <Ionicons style={styles.icon} name="earth" />
                    <Text style={styles.subtitle}>
                      {item.breeds[0].country_code}
                    </Text>
                  </View>
                </View>
              </Animated.View>
            )
          } else {
            return (
              <Animated.View
                key={item.id}
                style={[
                  {
                    opacity: this.nextCardOpacity,
                    transform: [{ scale: this.nextCardScale }],
                    height: SCREEN_HEIGHT - 120,
                    width: SCREEN_WIDTH,
                    padding: 10,
                    position: 'absolute',
                  },
                ]}
              >
                <Animated.View
                  style={{
                    opacity: 0,
                    transform: [{ rotate: '-30deg' }],
                    position: 'absolute',
                    top: 50,
                    left: 40,
                    zIndex: 1000,
                  }}
                >
                  <Text
                    style={{
                      borderWidth: 1,
                      borderColor: 'green',
                      color: 'green',
                      fontSize: 32,
                      fontWeight: '800',
                      padding: 10,
                    }}
                  >
                    LIKE
                  </Text>
                </Animated.View>
                <Animated.View
                  style={{
                    opacity: 0,
                    transform: [{ rotate: '30deg' }],
                    position: 'absolute',
                    top: 50,
                    right: 40,
                    zIndex: 1000,
                  }}
                >
                  <Text
                    style={{
                      borderWidth: 1,
                      borderColor: 'red',
                      color: 'red',
                      fontSize: 32,
                      fontWeight: '800',
                      padding: 10,
                    }}
                  >
                    NOPE
                  </Text>
                </Animated.View>
                <Image
                  style={{ height: '86%', width: null, borderRadius: 10 }}
                  source={{ uri: `${item.url}` }}
                />
              </Animated.View>
            )
          }
        })
        .reverse()
    }
  }
  render() {
    return (
      <View>
        <View>{this.renderUsers()}</View>
        <View style={{ height: SCREEN_HEIGHT - 80 }}>
          <ButtonVote />
        </View>
      </View>
    )
  }
}

Answer 1

尝试这种方式，使用状态来反映 API 响应后的变化

class MyComponent extends Component {
  state = {
    imagesData: [],
  };

  // rest of the code remains the same

  componentDidMount() {
    axios.get(`xxxxxx`).then((res) => {
      const imagesData = res.data;
      this.setState({ imagesData });
    });
  }

  renderUsers = () => {
    if (this.state.imagesData) {
      return this.state.imagesData.map((item, i) => {}).reverse();
    }
  };
  render() {
    return <View></View>;
  }
}

无法使用来自 API 的 Axios 在 React Native 中查看数据

Unable to view data in react native using Axios from an API

react-native

axios

tsx