javascript - useState Hook 不起作用或未触发

Question

这是我的帖子组件working.req 函数，在已安装且 onScroll 函数触发但 Hook 不起作用或从未触发时工作。始终为第 1 页的值

const PostsComponent = () => {
  const [totalPage, setTotalPage] = useState(1)
  const [loading, setLoading] = useState(false)
  const [tags, setTags] = useState([]);
  const [haveMore, setHaveMore] = useState(null)
  const { items } = useSelector(state => ({
    items: state.posts.items
  }));
  const [page, setPage] = useState(1)
  const dispatch = useDispatch();

  const req = () => {
    if (page <= totalPage) {
      setLoading(true)
      getPosts(page).then(res => {
        res.posts.map(item => dispatch(getterPosts(item)));
        res.posts.length > 0 ? setHaveMore(true) : setHaveMore(false)
        setTotalPage(Math.ceil(res.total / 6));
      }).finally(f => setLoading(false), setPage(page + 1));
    }
  };

  const onScroll = event => {
    const { scrollHeight, scrollTop, offsetHeight } = event.srcElement;
    if (scrollTop + offsetHeight === scrollHeight) {
      req();
    }
  };

};

服务中的 getPosts 函数

export const getPosts = page => {
  return new Promise((resolve, reject) => {
    axios
      .get(`${BASE_URL}/api/posts?page=${page}`)
      .then(res => resolve(res.data))
      .catch(err => reject(err.response.data.message));
  });
};

Answer 1

有两个问题:

1. 您的 page 变量在您使用时可能已过时，因为您的组件可能在 finally 回调之前重新渲染。

2. 这行代码没有执行您可能希望它执行的操作:

   }).finally(f => setLoading(false), setPage(page + 1))
   

   它的作用是调用 setPage(page + 1)，然后调用finally传入函数f => setLoading(false) 和值 undefined(调用 setPage 的结果)。这是为了使用箭头函数的简洁形式而不使用逗号运算符的众多原因之一。

您可以通过以下方式修复它们

1. 使用 setPage 的回调版本，它始终接收状态项的当前值
2. 使用箭头函数的函数体形式，包含要在 finally 处理程序中进行的两个调用

像这样:

}).finally(f => {
    setLoading(false);
    setPage(p => p + 1);
});

<小时/>

我建议阅读this article丹·阿布拉莫夫。表面上，这是关于 useEffect 的，但一路上他很好地解释了诸如陈旧状态变量之类的东西......