React - 无法传递来自子组件的数据

Question

我正在将我的状态 setter 函数 (setPlayerButton) 从父组件传递给子组件。当它被调用时，我得到一个错误，它不是一个函数。我有另一个状态 setter 函数 (setGameStarted) 以完全相同的方式设置并且它可以正常工作。为什么这个会抛出错误？

父组件：

function App() {

  const [gameStarted, setGameStarted] = useState<boolean>(false)
  const [playerButton, setPlayerButton] = useState<string>("")

  // const updatePlayerButton = (button: string) => {
  //   setPlayerButton(button)
  // }


  return (
    <div>
        <Header />
        {gameStarted ? <PlayingGame playerButton={playerButton}/> : <Gameboard setGameStarted={setGameStarted} setPlayerButton={setPlayerButton}/>}
        <Rules />
    </div>
  );
}

子组件（相关部分）：

interface IgameBoard {
  setGameStarted: React.Dispatch<React.SetStateAction<boolean>>
  setPlayerButton: React.Dispatch<React.SetStateAction<string>>
} 

// React.Dispatch<React.SetStateAction<string>>



function Gameboard({setGameStarted}: IgameBoard, {setPlayerButton}: IgameBoard) {

  const setGame = (event: MouseEvent<HTMLElement>) => {
    setGameStarted(true)
    //id isn't in all variations of target and can be, for example window. If you know the target is an element, you can cast to that
    setPlayerButton((event.target as Element).id)
  }

  return (
    <div>

      <section className='mx-auto w-11/12 flex flex-wrap z-10 -mb-80 mt-24 '>
        {/* border-2 border-orange-300 */}
        <div onClick={setGame} id='Scissors1' className='w-full mb-4'>
          <div className='bg-scissors-bg-first -mb-[116px] rounded-full w-28 h-28 mx-auto' id='Scissors2'></div>
          <div className='bg-scissors-bg-last -mb-24 rounded-full w-28 h-28 mx-auto' id='Scissors3'></div>
          <div className='bg-slate-300 -mb-[76px] rounded-full w-20 h-20 z-10 mx-auto'id='Scissors4'></div>
          <div className='bg-white rounded-full -mb-16 w-20 h-20 z-20 mx-auto' id='Scissors5'></div>
          <img src={Scissors} alt='Scissors button' className='mx-auto w-9 z-30' id='Scissors6'/>
        </div>

错误：

Gameboard.tsx:24 Uncaught TypeError: setPlayerButton is not a function
    at setGame (Gameboard.tsx:24:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
    at invokeGuardedCallback (react-dom.development.js:4056:1)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4070:1)
    at executeDispatch (react-dom.development.js:8243:1)
    at processDispatchQueueItemsInOrder (react-dom.development.js:8275:1)
    at processDispatchQueue (react-dom.development.js:8288:1)
    at dispatchEventsForPlugins (react-dom.development.js:8299:1)
    at react-dom.development.js:8508:1

Answer 1

这个问题在这里。您编写的代码希望传递两个单独的对象：

function Gameboard({setGameStarted}: IgameBoard, {setPlayerButton}: IgameBoard) {

但是组件 props 全部集中在一个函数参数中，而不是两个。正确的解构方式是：

function Gameboard({setGameStarted, setPlayerButton}: IgameBoard) {

React - 无法传递来自子组件的数据

React - can't pass up data from child component

reactjs

react-hooks

use-state