setState挂钩未更新

时间:2019-08-04 08:09:40

标签: reactjs react-hooks

我有一个标题,要在向下滚动时隐藏并在向上滚动时显示。
为此,我将滚动位置保存为prevScrollPos,并将其与当前滚动位置 onscroll 进行比较,然后将prevScrollPos更新为当前:

 const [visible, setVisible] = React.useState(true);
 const [prevScrollPos, setPrevScrollPos] = React.useState(window.pageYOffset);

  const handleScroll = () => {
    const scrollPos = window.pageYOffset;
    const visible = scrollPos < prevScrollPos;

    setVisible(visible);
    setPrevScrollPos(scrollPos);
  }

问题是,由于某种原因,PrevScrollPos无法更新。
笔:https://codepen.io/moaaz_bs/pen/jgGRoj?editors=0110

2 个答案:

答案 0 :(得分:3)

您需要修改useEffect函数:

git restore --staged --worktree --source

基本上,您无法在处理程序中访问 React.useEffect(() => { window.addEventListener('scroll', handleScroll); return () => { window.removeEventListener('scroll', handleScroll); }; }); ,因此侦听器中的prevScrollPos将始终返回0。要解决此问题,不应该存在依赖项数组。

-> +不要忘记添加事件监听器。 :-)

答案 1 :(得分:0)

您能尝试一下吗?

import java.util.Arrays;
import java.util.List;
import java.util.Map;
import java.util.Objects;
import java.util.stream.Collectors;

public class AccountGroupingAndAveraging {

    static class Account {
        private final int id;
        private final String type;
        private final int amount;

        public Account(int id, String type, int amount) {
            this.id = id;
            this.type = type;
            this.amount = amount;
        }

        public int getId() {
            return id;
        }

        public String getType() {
            return type;
        }

        public int getAmount() {
            return amount;
        }
    }

    static class AccountGroupingKey {
        private final int id;
        private final String type;

        public AccountGroupingKey(Account account) {
            this.id = account.getId();
            this.type = account.getType();
        }

        public int getId() {
            return id;
        }

        public String getType() {
            return type;
        }

        @Override
        public boolean equals(Object o) {
            if (this == o) {
                return true;
            }
            if (o == null || getClass() != o.getClass()) {
                return false;
            }
            AccountGroupingKey that = (AccountGroupingKey) o;
            return id == that.id &&
                Objects.equals(type, that.type);
        }

        @Override
        public int hashCode() {
            return Objects.hash(id, type);
        }
    }

    public static void main(String[] args) {
        List<Account> accounts = Arrays.asList(
            new Account(1, "past", 40),
            new Account(1, "past", 40),
            new Account(1, "present", 60),
            new Account(2, "past", 20),
            new Account(2, "present", 10),
            new Account(2, "present", 60)
        );

        Map<AccountGroupingKey, Double> result =
            accounts.stream().collect(
                Collectors.groupingBy(AccountGroupingKey::new,
                                      Collectors.averagingInt(Account::getAmount)));
        result.forEach((key, average) -> System.out.println(key.id + ", " + key.type + ", " + average));
    }
}
相关问题