显示信息React Native

6kkfgxo0 于 2022-11-25 发布在 React

关注(0)|答案(1)|浏览(126)

我试图在后端显示检索到的信息。恢复工作很顺利，但当我使用"array.push"将这些信息放入数组时，它不起作用。我还尝试使用useState，但由于某种原因，我的程序在无限循环中运行。

import React, {useState} from "react";
import {View, Text, Image} from "react-native";
import AsyncStorage from "@react-native-async-storage/async-storage";
const jwtDecode = require("jwt-decode");
import {useDispatch} from "react-redux";
import * as authAction from "../redux/actions/authAction";
const FavoriteScreen = (props) => {
  const [id, setId] = useState("");
  const [informations, setInformations] = useState([]);
  const dispatch = useDispatch();
  let array = [];
  const checkToken = async () => {
    const token = await AsyncStorage.getItem("token");
    if (!token) {
      console.log("coucou le token n'existe pas");
      Alert.alert("Vous n'êtes pas connecté à un compte existant");
      return;
    }
    const decoded = jwtDecode(token);
    setId(decoded._id);
  };
  checkToken();
  dispatch(authAction.Favorite(id))
    .then((response) =>
      response.array.map((data) => {
        array.push(data);
        setInformations(array);
      })
    )
    .catch((error) => {
      console.error(error);
    });
  return (
    <View>
      {informations.map((data) => {
        <Text>{data["image_url"]}</Text>;
      })}
    </View>
  );
};
export default FavoriteScreen;

react-native

来源：https://stackoverflow.com/questions/74535223/display-informations-react-native

1条答案

按热度按时间

6ojccjat1#

目前，您正在经历一个无限循环，因为您的API调用是在组件的“呈现端”被调用的。
另外一个问题是，API调用不会等待id被填充，因此我们需要在进行API调用之前等待令牌id
功能组件

import React, { useState } from "react";
import { View, Text, Image } from "react-native";
import { useDispatch } from "react-redux";
import AsyncStorage from "@react-native-async-storage/async-storage";
const jwtDecode = require("jwt-decode");
const FavoriteScreen = (props) => {
  const [informations, setInformations] = useState([]);
  const dispatch = useDispatch();
  const getToken = async () => {
    const token = await AsyncStorage.getItem("token");
    if (!token) {
      console.log("coucou le token n'existe pas");
      Alert.alert("Vous n'êtes pas connecté à un compte existant");
      return "";
    }
    const decoded = jwtDecode(token);
    return decoded._id;
  };
  useEffect(async () => {
    const id = await getToken();
    if (!id) return;
    dispatch(authAction.Favorite(id))
      .then((response) => {
        const newArray = response.array;
        setInformations(newArray);
      })
      .catch((error) => {
        console.error(error);
      });
  }, []);
  return (
    <View>
      {informations.map((data, index) => (
        <Text key={`information_${index}`}>{data["image_url"]}</Text>
      ))}
    </View>
  );
}
export default FavoriteScreen;

注意：这样，它就相当于组件生命周期中的componentDidMount

展开查看全部

赞(0）回复(0）举报 2022-11-25

我来回答

显示信息React Native

1条答案

相关问题

热门标签

最新问答