React JS中如何在主数组内新增第三个数组？

问题背景 #

现有React组件通过useState维护head和tail两个数组，并将它们存入main数组中。需求是新增第三个同类型数组（比如命名为middle），并将其加入main数组，同时实现对应的添加按钮和内容展示。

原组件代码 #

import './App.css';
import { useState } from 'react'

function App() {
  const [head,setHead] = useState([])
  const [tail,setTail] = useState([])

  const main = [];
  main.push(head,tail)
  console.log(main);
  
  const handleHead = () =>{
    const HeadButton = 'H'
    setHead([...head,HeadButton])
  }

  const handleTail = () =>{
    const TailButton = 'T'
    setTail([...tail,TailButton])
  }

  return (
    <div className="App">
      <button onClick={handleHead} >Head</button>
      <button onClick={handleTail}>Tail</button>
      <h1>{head.join(',')}</h1>
      <h1>{tail.join(',')}</h1>
    </div>
  );
}

export default App;

实现步骤 #

• 新增第三个状态数组：添加middle和对应的setMiddle状态，初始值为空数组
• 更新main数组：将middle也push到main数组中
• 添加点击处理函数：实现handleMiddle函数，点击时向middle数组添加标识（比如'M'）
• 更新页面UI：添加第三个触发按钮，同时新增展示middle数组内容的元素

修改后的完整代码 #

import './App.css';
import { useState } from 'react'

function App() {
  const [head, setHead] = useState([])
  const [tail, setTail] = useState([])
  // 新增第三个状态数组
  const [middle, setMiddle] = useState([])

  const main = [];
  // 将三个数组都加入main
  main.push(head, middle, tail)
  console.log(main);
  
  const handleHead = () =>{
    setHead([...head, 'H'])
  }

  const handleTail = () =>{
    setTail([...tail, 'T'])
  }

  // 新增middle的处理函数
  const handleMiddle = () =>{
    setMiddle([...middle, 'M'])
  }

  return (
    <div className="App">
      <button onClick={handleHead} >Head</button>
      {/* 新增Middle按钮 */}
      <button onClick={handleMiddle}>Middle</button>
      <button onClick={handleTail}>Tail</button>
      <h1>{head.join(',')}</h1>
      {/* 新增展示middle内容 */}
      <h1>{middle.join(',')}</h1>
      <h1>{tail.join(',')}</h1>
    </div>
  );
}

export default App;

额外说明 #

如果后续需要添加更多同类型数组，建议将所有子数组统一维护在一个状态中，比如const [sections, setSections] = useState([[], [], []])，这样扩展和管理会更便捷。

内容的提问来源于stack exchange，提问作者DP Patel