根据ID从重复的多级嵌套json文件结构中删除对象及其子对象

Question

我想使用带有 react-json-server 的 db.json 制作树状层次结构数据表。我想让它变得通用，以便能够使用具有相同结构的不同数据。我唯一的问题是，当我想从表中删除特定数据时。 我需要有关 removeRow - filterRecords 功能的帮助。现在它需要两个参数记录（来自 db.json 的数据）和从 onclick 操作发送的记录，它是带有参数 {"data":{...}, "kids":{...}} 的对象来自特定的嵌套记录级别。我的函数将按记录过滤记录并返回更新的记录数组。 问题是我认为最好只返回更改的对象并使用“更新/补丁”替换根据最上面的父 ID 更改的整个对象，然后用 POST 替换所有数据。

这是我的应用程序组件，可以更好地了解我在说什么：

function App(): JSX.Element {
  const [data, setData] = useState<Record[] | null>(null);
  const [error, setError] = useState<Error | null>(null);
  const [isLoaded, setIsLoaded] = useState<boolean>(false);
  const api = useFetch();

  const url = "http://localhost:5000/records";

  const renderCondition = {err: error, load: !isLoaded};

  const getRenderMessage = (condition: {err: Error | null; load: boolean}) => {
    const message = condition.err ? `${error?.message}` : `Loading`;
    return message;
  };

  useEffect(() => {
    const getData = () => {
      api
        .get(url)
        .then((res: Record[]) => {
          setData(res);
          setIsLoaded(true);
        })
        .catch((err: Error) => {
          setError(err);
          setIsLoaded(true);
        });
    };
    getData();
  }, []);

  const removeRow = useCallback(
    (record: Record) => {
      const filterRecords = (records: Record[] | null, record: Record): Record[] | null => {
        if (!records) {
          return null;
        }

        const filteredRecords = records.filter((r) => r !== record);
        if (filteredRecords.length === 0) {
          return null;
        }
        return filteredRecords.map((r) => {
          if (r.kids) {
            const filteredKids = Object.entries(r.kids).reduce<Kids>(
              (acc, [key, {records: kidsRecords}]) => {
                const filteredRecords = filterRecords(kidsRecords, record);
                if (filteredRecords) {
                  acc[key] = {records: filteredRecords};
                }
                return acc;
              },
              {}
            );
            const filteredKidsEntries = Object.entries(filteredKids).filter(
              ([key, {records}]) => records !== null
            );
            const hasKids = filteredKidsEntries.length > 0;
            console.log("entries", r, Object.fromEntries(filteredKidsEntries));

            return {
              ...r,
              kids: hasKids ? Object.fromEntries(filteredKidsEntries) : null,
            };
          }
          return r;
        });
      };

      const filteredData = filterRecords(data, record);
      console.log("filteredData", filteredData);
      setData(filteredData ?? []);
    },
    [data]
  );
 

  return renderCondition.err || renderCondition.load ? (
    <div>{getRenderMessage(renderCondition)}</div>
  ) : (
    <div className="App">
      <Table data={data} removeRow={removeRow} />
    </div>
  );
}

export default App;

这里是 db.json 记录数据的例子：

{
    "data": [ 
    {
      "data":{
         "Identification number":"34",
         "Name":"Joqmo",
         "Gender":"female",
         "Risk":"BITES",
         "Hair length":"6.2000000000",
         "IQ":"98",
         "Admission date":"Mon Dec 13 00:00:00 CET 1993",
         "Last breakdown":"Wed Dec 24 07:14:50 CET 2014",
         "Yearly fee":"67035",
         "Knows the Joker?":"true"
      },
      "kids":{
         "has_relatives":{
            "records":[
               {
                  "data":{
                     "Relative ID":"1007",
                     "Patient ID":"34",
                     "Is alive?":"true",
                     "Frequency of visits":"29"
                  },
                  "kids":{
                     "has_phone":{
                        "records":[
                           {
                              "data":{
                                 "Phone ID":"2008",
                                 "ID of the relative":"1007",
                                 "Phone":"+(179)-982-0570"
                              },
                              "kids":{

                              }
                           },
                           {
                              "data":{
                                 "Phone ID":"2007",
                                 "ID of the relative":"1007",
                                 "Phone":"+(179)-982-0570"
                              },
                              "kids":{

                              }
                           }
                        ]
                     }
                  }
               }
            ]
         }
      }
    },
    {
      "data":{
         "Identification number":"35",
         "Name":"Jason",
         "Gender":"m",
         "Risk":"BITES",
         "Hair length":"1.6000000000",
         "IQ":"91",
         "Admission date":"Mon Feb 17 00:00:00 CET 1997",
         "Last breakdown":"Wed Dec 03 03:09:55 CET 2014",
         "Yearly fee":"67932",
         "Knows the Joker?":"false"
      },
      "kids":{

      }
   },  
  ] 
}```