您可以执行handleClick，如下所示：

const Case = ({ value, handleClick }) => {
   console.log(value)
  return (
    <button className='ttt-case' onClick={()=>handleClick(value)} >
        { value }
     </button>
  )
}

const Wrapper = () => {

   const [cases, setCases] = useState(Array(9).fill(null));
   const [isX, setIsX] = useState(true);

   const handleClick = (i) => {
        const newCases = [...cases];  //making a copy
        newCases[i] = isX ? 'X' : 'O';   // I'm not sure what is the logic here tbh
        setCases(newCases);
        setIsX(x=>!x); // updater function
   }

    return ( 
        <div className='ttt-wrapper'>
            <div className='ttt-3-cols'>
                <Case value={cases[0]} handleClick={handleClick}/>
                <Case value={cases[1]} handleClick={handleClick}/>
                <Case value={cases[2]} handleClick={handleClick}/>
            </div>
            <div className='ttt-3-cols'>
                <Case value={cases[3]} handleClick={handleClick}/>
                <Case value={cases[4]} handleClick={handleClick}/>
                <Case value={cases[5]} handleClick={handleClick}/>
            </div>
            <div className='ttt-3-cols'>
                <Case value={cases[6]} handleClick={handleClick}/>
                <Case value={cases[7]} handleClick={handleClick}/>
                <Case value={cases[8]} handleClick={handleClick}/>
            </div>
        </div>
    )
}

const Case = ({ value, handleClick }) => {
   console.log(value)
  return (
    <button className='ttt-case' onClick={()=>handleClick(value)} >
        { value }
     </button>
  )
}

这是解决方案：

const Wrapper = () => {

   const [cases, setCases] = useState(Array(9).fill(null));
   const [isX, setIsX] = useState(true);

   const handleClick = (i) => {
        cases[i] = isX ? 'X' : 'O';
        setCases(cases);
        setIsX(!isX);
        console.log(cases)
   }

    return ( 
        <div className='ttt-wrapper'>
            <div className='ttt-3-cols'>
                <Case value={cases[0]} onClick={()=> handleClick(0)}/>
                <Case value={cases[1]} onClick={()=> handleClick(1)}/>
                <Case value={cases[2]} onClick={()=> handleClick(2)}/>
            </div>
            <div className='ttt-3-cols'>
                <Case value={cases[3]} onClick={()=> handleClick(3)}/>
                <Case value={cases[4]} onClick={()=> handleClick(4)}/>
                <Case value={cases[5]} onClick={()=> handleClick(5)}/>
            </div>
            <div className='ttt-3-cols'>
                <Case value={cases[6]} onClick={()=> handleClick(6)}/>
                <Case value={cases[7]} onClick={()=> handleClick(7)}/>
                <Case value={cases[8]} onClick={()=> handleClick(8)}/>
            </div>
        </div>
    )
}

外壳组件：

const Case = ({ value, onClick }) => {      return (
        <button className='ttt-case' onClick={onClick}>
            { value }
         </button>
      )
    }