在父组件内部更新后，状态未在子组件中更新

Question

父组件更新其布尔状态并将此状态发送给子组件，但在子组件中，此更新状态未反映。

 const [showSeeAllNewsComponent, setShowSeeAllNews] = useState(false);
 const onClickSeeAll_news = isShown => {
    console.log("back", isShown, !isShown);
    setShowSeeAllNews(isShown);
  };
 const onBottomEventSeeAlluser = async () => {
    if (showSeeAllNewsComponent) {
        Pagination.offset = Pagination.offset + 1;
        await HomeAPI.newsDetail(Pagination.offset, Pagination.limit).then(
            userData=> {
                console.log(userData.data, loading);
                setUserData(userPData=>([...userPData, ...userData.data]));      
            }
        );
    }
  };
return(
 <Header  onBackClick={(valBool: boolean) => onClickSeeAll_news(valBool)} isheaderBreadCrumb={showSeeAllNewsComponent}></Header>
{showSeeAllUserComponent ? <AllUser userDataNews={userData}  onBottomEvent={onBottomEventSeeAllUser}  isShown={showSeeAllUserComponent} ></AllUser> : <div>Some Other Component</div>
)

showSeeAllUserComponent 在 AllUser 子组件中不起作用。但在 Header 子组件中它的工作。是因为滚动事件。 在子组件中。当我们到达页面底部时，即使所有用户组件都没有显示 onBottomEvent 被触发

子组件

function AllUser({ userDataNews, onBottomEvent,isShown }) {
  useEffect(() => {

    window.addEventListener("scroll", onScrollCheck, true);
  }, []);
  const onScrollCheck = event => { 
    if(isShown){
       event.target.scrollHeight - event.target.scrollTop ===
       event.target.clientHeight
        ? onBottomEvent()
        : "";
    }
  };
}

重复调用编辑滚动检查，如果未显示子组件，它也会调用 api

const [showSeeAllNewsComponent, setShowSeeAllNews] = useState(false);

 const onScrollCheck = event => {
    console.log("scrollchecks", showSeeAllNewsComponent);
     if (showSeeAllNewsComponent) {
    event.target.scrollHeight - event.target.scrollTop ===
    event.target.clientHeight
      ? onBottomEventSeeAllNews()
      : "";
    }
  };

  useEffect(() => {
    window.addEventListener("scroll", onScrollCheck, true);
    return () => window.removeEventListener("scroll", onScrollCheck);
  }, [onScrollCheck]);

 const onClickSeeAll_news = isShown => {
    console.log("back", isShown, !isShown);
    setShowSeeAllNews(isShown);
  };
 const onBottomEventSeeAlluser = async () => {
    if (showSeeAllNewsComponent) {
        Pagination.offset = Pagination.offset + 1;
        await HomeAPI.newsDetail(Pagination.offset, Pagination.limit).then(
            userData=> {
                console.log(userData.data, loading);
                setUserData(userPData=>([...userPData, ...userData.data]));      
            }
        );
    }
  };
 return(
 <Header  onBackClick={(valBool: boolean) => onClickSeeAll_news(valBool)} 
 isheaderBreadCrumb={showSeeAllNewsComponent}></Header>
 {showSeeAllUserComponent ? <AllUser userDataNews={userData}    isShown= 
 {showSeeAllUserComponent} ></AllUser> : <div>Some Other Component</div>
 )

Answer 1

你需要在 useEffect 依赖中添加onScrollCheck ，否则当 isShown 改变时你的 use effect 不会被调用：

  useEffect(() => {
    window.addEventListener("scroll", onScrollCheck, true);
    return () => window.removeEventListener('scroll', onScrollCheck);
  }, [onScrollCheck]);

如果你害怕性能问题，你可以使用useCallback for onScrollCheck：

  const onScrollCheck = useCallback(event => { 
    if(isShown){
       event.target.scrollHeight - event.target.scrollTop ===
       event.target.clientHeight
        ? onBottomEvent()
        : "";
    }
  }, [isShown, onBottomEvent]);