Question

在我的父组件中：

我有一个布尔状态： const [isLoading, setIsLoading] = useState<boolean>(true);

我将其发送给子组件：

return (
 <OrganisationPersonsLister personsStripped={personsStripped} isLoading={isLoading} />
);

在我的孩子部分：我收到了道具

const OrganisationPersonsLister = React.memo((props: { isLoading: boolean }) => {

}

根据布尔值，我希望它呈现不同的组件。

  return (
    <section className="org-person-lister">
      {
        (isLoading)
          ? <Spinner />
          : <PopTable title={"title"} columns={columns} data={personsStripped} />
      }
    </section>
  )

我如何更新父组件中的状态：

const viewOrganisation = (orgId: string) => {
    const org = orgList.find(o => o.id === orgId);
    if (org !== undefined) {
      setIsLoading(true)
      setChosenOrg(org);
      PersonApi.fetchPersonsByOrganisationId(orgId).then(response => {
        console.log("fetchPersonByOrganisationId: ", response)
        setIsLoading(false)
        setPersonsStripped(response)
      }).catch(err => {
        console.error("Error occurred: ", err);
        setIsLoading(false)
        setPersonsStripped([])
      });
    }
  };

问题在于，它在初始加载时执行一次，然后在子组件中保持为false，即使状态在父组件中已更新。如何使状态/道具同步？

Answer 1

尝试添加一个调用setIsLoading的useEffect（将其导入到useState旁边）。下面的伪代码

useEffect(() => {
  if(...){
   setIsLoading(true)
   ...
  } else {
   setIsLoading(false)
  }
}, [var1, ...])

作为useEffect的第二个参数，您可以添加要在其上触发效果并因此状态更新的变量

在父状态更新时渲染子组件道具

1 个答案: