如何在 React js 中的主数组中创建新数组，javascript

Question

在那张图片中，我可以解释我的问题是什么

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">`your text`
      <button onClick={(e)=>handleHead(e)} >Head</button>
      <button onClick={(e)=>handleTail(e)}>Tail</button>
      <h1>{head.join(',')}</h1>
      <h1>{tail.join(',')}</h1>

 </div>
  );
}

export default App;

我可以在主数组内创建 2 个数组，而不是如何在 React js 中在主数组内创建第三个数组

Answer 1

尝试这个

 // Get a hook function const {useState} = React; const Example = ({title}) => { const [FinalList, setFinalList] = useState([]); const [ConsecutiveHead, setConsecutiveHead] = useState(false); const [ConsecutiveTail, setConsecutiveTail] = useState(false); const handleHead = () =>{ if(ConsecutiveHead) { const list = [...FinalList]; list[list.length -1].push("head"); setFinalList(list); } else { setFinalList(prev => [...prev, ["head"]]); } setConsecutiveHead(true); setConsecutiveTail(false); } const handleTail = () =>{ if(ConsecutiveTail) { const list = [...FinalList]; list[list.length -1].push("tail"); setFinalList(list); } else { setFinalList(prev => [...prev, ["tail"]]); } setConsecutiveHead(false); setConsecutiveTail(true); } console.log(FinalList) return ( <div className="App"> <button onClick={(e)=>handleHead(e)} >Head</button> <button onClick={(e)=>handleTail(e)}>Tail</button> </div> ); }; // Render it ReactDOM.createRoot( document.getElementById("root") ).render( <Example title="Example using Hooks:" /> );

 <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.js"></script>