如何使用react状态添加或删除父数组下的子数组？

import React, { useState } from 'react';

function ParentComponent() {
  const [subArrays, setSubArrays] = useState([]);

  // 其他代码...

  return (
    // JSX代码...
  );
}

function ParentComponent() {
  const [subArrays, setSubArrays] = useState([]);

  const addSubArray = (subArray) => {
    setSubArrays([...subArrays, subArray]);
  };

  // 其他代码...

  return (
    // JSX代码...
  );
}

function ParentComponent() {
  const [subArrays, setSubArrays] = useState([]);

  const addSubArray = (subArray) => {
    setSubArrays([...subArrays, subArray]);
  };

  const removeSubArray = (index) => {
    const updatedSubArrays = [...subArrays];
    updatedSubArrays.splice(index, 1);
    setSubArrays(updatedSubArrays);
  };

  // 其他代码...

  return (
    // JSX代码...
  );
}

function ParentComponent() {
  const [subArrays, setSubArrays] = useState([]);

  const addSubArray = (subArray) => {
    setSubArrays([...subArrays, subArray]);
  };

  const removeSubArray = (index) => {
    const updatedSubArrays = [...subArrays];
    updatedSubArrays.splice(index, 1);
    setSubArrays(updatedSubArrays);
  };

  return (
    <div>
      {/* 其他组件代码... */}
      {subArrays.map((subArray, index) => (
        <ChildComponent
          key={index}
          subArray={subArray}
          removeSubArray={() => removeSubArray(index)}
        />
      ))}
    </div>
  );
}

function ChildComponent({ subArray, removeSubArray }) {
  return (
    <div>
      {/* 子数组的展示内容 */}
      <button onClick={removeSubArray}>删除</button>
    </div>
  );
}