如何在React(Next.js)中使用具有不同查詢字串的另一個GET請求時維持來自DB的資料？

我英語說得不太好。請諒解！

首先，請檢查我的代碼！

export default function DriveFolder() {

    const [clickFolderPk, setClickFolderPk] = useState(1);

    const viewFolder = async () => {
        const url = `/api/store/drive/view-folder?folderId=${clickFolderPk}`;
        await get(url)
            .then((res) => {
                console.log(res);
                setMainFolder(res.directChildrenFolders);
            })
            .catch((error) => {
                console.log(error);
            });
    };

    useEffect(() => {
        viewFolder();
    }, [clickFolderPk]);


    return (

        <div className={classes.driveFolder}>

            {mainFolder.map((main, key) => (
                <TreeView>
                    <TreeItem
                    onClick={() => setClickFolderPk(main.FOLDER_PK)}>
                        <TreeItem nodeId='10' label='OSS' />
                        <TreeItem nodeId='6' label='Material-UI'>
                            <TreeItem nodeId='7' label='src'>
                                <TreeItem nodeId='8' label='index.js' />
                                <TreeItem nodeId='9' label='tree-view.js' />
                            </TreeItem>
                        </TreeItem>
                    </TreeItem>
                </TreeView>
            ))}
        </div>
    );
}

我編輯了一些代碼以使其清楚。（可能拼寫錯誤）

使用此代碼，在第一次渲染時，由于“clickFolderPk”值為 1，我從 DB 中獲取了正確的資料。

但是，由于我在“clickFolderPk”值為 1 的檔案夾中有子檔案夾，我必須請求另一個 GET REQUEST 才能從根檔案夾中查看我的子檔案夾。

這是一個簡單的影像，您可以更好地了解我的情況。

這是我從“clickFolderPk”值 1 中得到的。

但是，當我按下“kikiki”時，GET 請求功能并呈現如下。

.

這不是我想要渲染事物的方式。

我想要資料庫中的每個資料，但是每當我使用具有不同 PK 號的不同 GET 請求時，它們都不會消失。

我希望它們留在螢屏上并獲取其中的子檔案夾。

我在這個問題上掙扎了很長一段時間。

您的幫助將不勝感激！！！！！！！

uj5u.com熱心網友回復：

這都是關于嵌套的：檔案夾有子檔案夾等，它繼續......

注意：為了分解事情，我將從 React 的角度回答，而不管您的后端 api 的結構或回傳資料的方式。

基本上有兩種主要方法，

方法#1：

全域狀態是所有檔案夾的單一事實來源，這樣想：

  const [allFolders, setAllFolders] = useState([
    {
      id: "1",
      name: "a-1",
      folders: [
        {
          name: "a-subfolder-1",
          folders: [{ name: "a-subfolder-subfolder-1" }],
        },
        { name: "subfolder-2" },
      ],
    },
  ]);

問題是任何小的更新都需要改變整個狀態。所以我將更多地關注方法#2

方法#2：

有子組件的主樹，子組件也可以擴展并有子組件：

import { useEffect, useState } from "react";
import "./styles.css";

export default function DriveFolder() {
  const [folders, setFolders] = useState([
    { id: "1", name: "folder-a" },
    { id: "2", name: "folder-b" },
    { id: "3", name: "folder-c" }
  ]);

  return (
    <div style={{ display: "flex", flexDirection: "column" }}>
      {folders.map((folder) => {
        return <Folder key={folder.id} folder={folder} />;
      })}
    </div>
  );
}

const Folder = ({ parent = undefined, folder }) => {
  const [subfolders, setSubfolders] = useState([]);
  const [isOpened, setOpened] = useState(false);
  const hasSubfolders = subfolders.length > 0;

  useEffect(() => {
    // send request to your backend to fetch sub-folders

    // --------------- to ease stuff I will hard code it

    // with this you can limit the example of nest you wish
    const maxNestsCount = 5;
    const subfolderParent = parent || folder;
    const subfolder = {
      id: subfolderParent.id   "-sub",
      name: "subfolder-of-"   subfolderParent.name
    };
    const currentNestCount = subfolder.name.split("-sub").length;
    setSubfolders(currentNestCount < maxNestsCount ? [subfolder] : []);
    // -----------------------------
  }, []);

  const handleToggleShowSubFolders = (e) => {
    e.stopPropagation();
    if (!hasSubfolders) {
      return;
    }

    setOpened(!isOpened);
  };

  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        paddingHorizontal: 5,
        marginTop: 10,
        marginLeft: parent ? 20 : 0,
        backgroundColor: "#1678F230",
        cursor: hasSubfolders ? "pointer" : undefined
      }}
      onClick={handleToggleShowSubFolders}
    >
      {folder.name}

      <div style={{ display: isOpened ? "block" : "none" }}>
        {subfolders.map((subfolder) => (
          <Folder key={subfolder.id} parent={folder} folder={subfolder} />
        ))}
      </div>
    </div>
  );
};

試試看：

這是上面示例代碼的輸出：

標籤：

上一篇：我可以從一個組件匯出資料以更新父級父級中的狀態嗎？

下一篇：在JSON中處理LaravelSanctumApi的驗證錯誤