为什么每当我使用React Navigation，usafeft和Axios导航到详细信息屏幕时，它显示了以前的数据

Question

我正在尝试使用Expo构建电影详细信息React Antive App，并且每当我试图从家中导航到详细信息页面时，每当我在电影详细信息页面上显示以前的数据时。如何解决这个问题。 我正在使用React Navigation在屏幕之间导航，并且我也使用Axios获取来自API的数据。 我不明白，为什么每次显示先前的数据时。

视频 - https://www.youtube.com/shorts/0jgl2spyujw

- https://i.sstatic.net/0qle1.png

const DetailsScreen = ({ route, navigation }) => {
    const [apis, setApis] = useState([]);
    const URL = "https://demoapi.com" + route.params.categoryWithId;
    useEffect(() => {
        console.log("Top ==>" + URL);
        async function getAllData() {
            try {
                const apis = await axios.get(URL);
                setApis(apis.data);
            } catch (error) {
                console.log(error);
            }
        }
        getAllData();
    }, []);

    if (!apis.length) return null;
    console.log("details ==> " + JSON.stringify(apis));

    return (
        <>
            <ImageBackground source={{ uri: apis[0].image }} resizeMode="cover" style={styles.backgroundImage} >
                <Wrapper>
                    {/* PlatformLogo */}
                    <ImageBackground
                        resizeMode="contain"
                        source={{
                            uri: "https://pngimg.com/uploads/netflix/netflix_PNG32.png",
                        }}
                        style={styles.platformLogo}
                    />
                    <Title>{apis[0].title}</Title>
                    {/* <Text>{verticlebanner}</Text> */}
                    <SubTitle>{apis[0].date}</SubTitle>
                    <PlayIcon
                        style={{
                            backgroundColor: "white",
                            borderRadius: 50,
                        }}
                    />
                </Wrapper>
            </ImageBackground>

            <StatusBar hidden />
        </>
    );
};

屏幕显示“ Dr. Strange”，然后我单击“壁架”，然后显示“ Minions”的数据等... 为什么它每次都显示以前的数据

Answer 1

根据您的代码，仅需要lodader或isloading状态以进行API调用和状态更新，如下所示，代码对我来说很好。

const DetailsScreen = ({ route, navigation }) => {
const [apis, setApis] = useState([]);
const [isLoading, setIsLoading] = useState(true);
const URL = "https://demoapi.com" + route.params.categoryWithId;
useEffect(() => {
  console.log("Top ==>" + URL);
  getAllData();
}, []);
const getAllData = async () => {
try {
  const apis = await axios.get(URL);
  setApis(apis.data);
} catch (error) {
  console.error(error);
 } finally {
   setIsLoading(false);
 }
 }
  if (!apis.length) return null;
console.log("details ==> " + JSON.stringify(apis));
 return (
<>
  {isLoading ? <ActivityIndicator size={'large'} color={'#113A69 '} />
    : <>
      <ImageBackground source={{ uri: apis[0].image }} resizeMode="cover" style={styles.backgroundImage} >
        <Wrapper>
          {/* PlatformLogo */}
          <ImageBackground
            resizeMode="contain"
            source={{
              uri: "https://pngimg.com/uploads/netflix/netflix_PNG32.png",
            }}
            style={styles.platformLogo}
          />
          <Title>{apis[0].title}</Title>
          {/* <Text>{verticlebanner}</Text> */}
          <SubTitle>{apis[0].date}</SubTitle>
          <PlayIcon
            style={{
              backgroundColor: "white",
              borderRadius: 50,
            }}
          />
        </Wrapper>
      </ImageBackground>
      <StatusBar hidden />
    </>
  }
</>
);
 };