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子组件中其起作用。是因为滚动事件。在子组件中。即使我们未到达所有用户组件，当我们到达页面底部时，也会触发BottomEvent。

子组件

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()
        : "";
    }
  };
}

EdiT 反复调用scrollcheck，如果未显示子组件，也会调用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

您需要将onScrollCheck添加到useEffect依赖项，否则当isShown更改时，您的使用效果将不会被调用：

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

如果您担心性能问题，可以将useCallback用于onScrollCheck：

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

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

1 个答案: