useState 在 React Native 中无法正常工作

Question

我正在开发一个应用程序并使用 WordPress API 来显示帖子。我创建了 2 个按钮来导航帖子列表。如您所知，有一个参数“page=”来获取特定页面上的帖子，我已经初始化了一个状态来维护页码。主要问题是它没有正确递增。

Post 屏幕代码 -

import React, { useState, useEffect } from "react";
import { View, FlatList, TouchableOpacity } from "react-native";
import { Colors } from "../constant/colors";
import globalStyles from "../constant/globalStyle";
import axios from "axios";
import PostCard from "../components/PostCard";
import CustomButton from "../components/Button";

const Updates = () => {
  const [data, setData] = useState([]);
  const [page, setPage] = useState(1);
  const [loaded, setLoaded] = useState(false);

  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = async () => {
    const response = await axios.get(
      `https://bachrasouthpanchayat.in/wp-json/wp/v2/posts?embed=true&page=${page}`
    );
    setData(response.data);
    setLoaded(true);
  };

  const previousHandler = () => {
    setLoaded(false);
    let newPage = page - 1;
    setPage(newPage);
    fetchData();
  };

  const nextHandler = () => {
    setLoaded(false);
    let newPage = page + 1;
    setPage(newPage);
    fetchData();
  };

  return (
    <View
      style={{
        ...globalStyles.container,
        backgroundColor: Colors.BACKGROUND_SCREEN,
      }}
    >
      {loaded ? (
        <>
          <FlatList
            style={{ flex: 1, margin: 10 }}
            data={data}
            keyExtractor={(item) => item.id}
            renderItem={({ item }) => {
              return (
                <TouchableOpacity activeOpacity={0.7}>
                  <PostCard
                    title={item.title.rendered}
                    imageUrl={item.jetpack_featured_media_url}
                  />
                </TouchableOpacity>
              );
            }}
          />
          <View
            style={{
              flexDirection: "row",
              alignItems: "center",
              alignContent: "stretch",
              justifyContent: "center",
            }}
          >
            {page == 1 ? (
              <TouchableOpacity
                activeOpacity={0.7}
                style={{ width: "100%" }}
                onPress={nextHandler}
              >
                <CustomButton>Next</CustomButton>
              </TouchableOpacity>
            ) : (
              <>
                <TouchableOpacity
                  activeOpacity={0.7}
                  style={{ marginRight: 2, width: "50%" }}
                  onPress={previousHandler}
                >
                  <CustomButton>Previous</CustomButton>
                </TouchableOpacity>
                <TouchableOpacity
                  activeOpacity={0.7}
                  style={{ width: "50%" }}
                  onPress={nextHandler}
                >
                  <CustomButton>Next</CustomButton>
                </TouchableOpacity>
              </>
            )}
          </View>
        </>
      ) : null}
    </View>
  );
};

export default Updates;

我记录了每个状态的状态，发现在第一次按下按钮时并没有从 1 增加到 2。我认为状态在 API 调用后更新，因为两个按钮都已开始显示，即使我使用条件仅在状态不是 1 时才显示两个按钮如果我犯了任何愚蠢的错误，请告诉我

Answer 1

  useEffect(() => {
    fetchData();
  }, []);

useEffect 的最后一个参数是一个依赖项数组，这样 React 只会在依赖项发生变化时重新运行效果。您正在传递一个空数组，它告诉 React 没有依赖关系，并且效果应该只运行一次，当组件首次安装时。

现在你实际上想要在页面改变时重新运行效果，所以你应该把page放在depenency数组中：

  useEffect(() => {
    fetchData();
  }, [page]);

并且（来源：@Keith）您应该删除 nextHandler 和 previousHandler

中额外的 fetchData() 调用

Answer 2

你必须这样实现它：

useEffect(() => {
 const fetchData = async () => {
setLoaded(true);
    const response = await axios.get(
      `https://bachrasouthpanchayat.in/wp-json/wp/v2/posts?embed=true&page=${page}`
    );
    setData(response.data);
    setLoaded(false);
  };
    fetchData();
  }, [page]);



  const previousHandler = () => {
    setPage(prevPage => prevPage - 1);
  };

这样每当用户改变页面时，它会自动调用useEffect中的函数，因为它在依赖数组中。

useState 在 React Native 中无法正常工作

useState is not working properly in React Native

javascript

react-native

axios

expo