[NextJS]：将组织列表从服务器传递到客户端组件

Question

上下文：我有一个服务器组件，用于获取组织列表并将其传递给客户端组件。客户端组件根据 prop 数据填充

organizations

状态。随后，它对其进行操作，更改其中的数据。一个例子是将组织的状态从活动状态更改为存档状态。

服务组件

export default async function ServerComponent({searchParams}) {
    const pageNumber = !!searchParams.page ? searchParams.page : 1;
    const organizations = await getOrganizations(session?.user.email, pageNumber);
 
 
    return <Organizations initialOrganizations={organizations}/>
}

客户端组件

export default function Organizations({ initialOrganizations = [] }) {
  const [organizations, setOrganizations] = useState(initialOrganizations);
  const [selectedOrganization, setSelectedOrganization] = useState({});
  const [toggle, setToggle] = useState(true);
  const [tabs, setTabs] = useState([{ name: 'Active', current: true },
                                    { name: 'Archive', current: false }]);
  const [activeTab, setActiveTab] = useState('Active');
 
  const router = useRouter();
  const search = useSearchParams();

 
  useEffect(() => {
    const page = search.get('page');
    if(page) {
      router.push(`/portal/organizations?page=${page}`)
    
    }
  }, [search])

  const handleOrganizationUpdate = (updatedOrganization) => {
    setOrganizations((prevOrganizations) =>
      prevOrganizations.map((o) =>
        o.id === updatedOrganization.id ? updatedOrganization : o
      )
    );
  };

  const archiveOrganization = async (organizationId) => {
      const response =  await fetch('/api/organization/archive',{
          method: 'POST',
          headers: {
              "Content-Type": "application/json",
          },
          body: JSON.stringify({ organizationId })
      });
      if(response.ok) {
          const responseBody = await response.json();
          const updatedOrganization = responseBody.response;
          console.log(updatedOrganization)
          setOrganizations((prev) =>
          prev.map((organization) =>
            organization.id === updatedOrganization.id ? { ...organization, status: updatedOrganization.status } : organization
          )
        );
      }
  }

  return (
    toggle ?
    <>
      <Button variant='solid' href='/portal/organizations/create-organization'>
                <span>Create Organization</span>
      </Button>
      <Tab tabs={tabs} setTabs={setTabs} setActiveTab={setActiveTab}/>
      {organizations.map((organization) => (
        activeTab.toUpperCase() == organization.status &&
        <div
          key={organization.id}
          className="group flex justify-between mt-10 flex-row items-center hover:bg-slate-900 w-3/5 px-8 py-6 mb-5 border-b-cyan-50 rounded shadow-black hover:shadow-black shadow-md hover:shadow-lg"
        >
          <div className='flex flex-col'>
            <h2 className='text-xs text-slate-300'>Organization Name</h2>
            <h2 onClick={() => {setToggle(false); setSelectedOrganization(organization)}} className="text-base hover:underline">{organization.name}</h2>
          </div>
    
          <Button onClick={() => {archiveOrganization(organization.id)}}  className="opacity-0 transition-opacity duration-100 ease-in-out group-hover:opacity-100" variant="solid">
            {organization.status == "ACTIVE" ? <span>Archive</span> : <span>Active</span>}
          </Button>
        </div>
      ))}
    </>
    :
    <Organization organization={selectedOrganization} handleOrganizationUpdate={handleOrganizationUpdate} setToggle={setToggle}/>
  );
}

问题：当安装组件并进行一些操作时，它显示更新的数组。重新挂载时，它使用最初作为 props 传递的陈旧数据，考虑到 props 不会更改并且状态会重新初始化，这一点是显而易见的。

请建议一种可以解决此问题的模式，可能是：

• 每当我导航到端点/组织时，重新获取服务器上的数据。
• 客户端组件中的替代逻辑不使用过时的数据。

Answer 1

据我了解，当数据发生某些更改时，您希望获取服务器组件中的最新数据。 为此，您可以使用 cache: "no-store" 来避免下一个 js 的缓存行为，并在每次访问页面时显示更新的数据。 要在数据更改后重新验证路径，您可以使用 revalidatePath 函数。