React 只重新渲染一個 setState 而不是另一個

Question

我正在用 React 創建一個簡單的井字游戲。

目標<\/strong>：每個按鈕都有自己的狀態。 單擊按鈕后，它應該將狀態從“”切換到“X”，然后將播放器的全局狀態更改為“播放器 2”。

問題<\/strong>：它只是重新渲染 setPlayer() 調用，而不是 setValue() 調用。 但是如果我擺脫 setPlayer() 並只調用 setValue()，那么它會按預期工作。 我需要 setStates 工作並重新渲染，以便在玩家名稱更改時顯示 X。

此處提供了復制此問題所需的所有代碼。 任何幫助\/建議表示贊賞。 謝謝你。

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

function App() {

  const player1 = "Player 1"
  const player2 = "Player 2"
  const [player, setPlayer] = useState(player1)
 

  const WhosTurnMessage =()=>(
    <div className='message'>
      {player}, It's Your Turn
    </div>
  )


  const Buttons =()=>{
    const [value, setValue] = useState()

    const checkAndSet =()=>{
      if (player === player1){
        setValue('X')
        setPlayer(player2)
      }
      else {
        setValue('O')
        setPlayer(player1)
      }
    }

    return (
      <div className='grid-item'>
        <button className='btn' onClick={()=>checkAndSet()} > 
          {value} 
        </button>
      </div>
    )
  }

  const MapButtons =()=>(
    [1,2,3,4,5,6,7,8,9].map( i =>  <Buttons key={`button ${i}`}/>)
  )


  return (
    <div className="App">
      <header className="App-header">
        <h1>
          Tick Tack Toe 
        </h1>
      </header>

      <WhosTurnMessage />
      
      <main>
        <div className='grid-container'>

        <MapButtons />
          
        </div>
      </main>
    </div>
  );
}

export default App;

Answer 1

您的代碼的問題在於您在渲染App<\/code>的過程中創建了全新類型的組件。 這行不通。 例如，每次App<\/code>渲染時，都會創建一個新的函數Buttons<\/code> 。 它可能與原始函數具有相同的文本，但所有反應都知道它是與上次不同的函數。 因此，由於它是一種不同類型的組件，因此 react 會卸載舊組件並安裝新組件，從而消除所有狀態。

您要定義的任何組件都需要移到App<\/code>之外，以便您只創建一次，而不是在每次渲染時創建它。這肯定包括Buttons<\/code> ，因為它具有狀態，雖然您可以將WhosTurnMessage<\/code>和MapButtons<\/code>移出，但我沒有不認為那些應該成為組件。 我只會讓App<\/code>計算 jsx 本身的那些位。

因此，如果您仍想將組件的某些部分分配給局部變量，我建議您這樣做：

function App() {
  const player1 = "Player 1"
  const player2 = "Player 2"
  const [player, setPlayer] = useState(player1)
 
  const whosTurnMessage = (
    <div className='message'>
      {player}, It's Your Turn
    </div>
  );

  const mapButtons = [1,2,3,4,5,6,7,8,9].map( i =>  <Buttons key={`button ${i}`}/>)

  return (
    <div className="App">
      <header className="App-header">
        <h1>
          Tick Tack Toe 
        </h1>
      </header>
        {whosTurnMessage}
      <main>
        <div className='grid-container'>
          {mapButtons}
        </div>
      </main>
    </div>
  )
}

const Buttons = () => {
  const [value, setValue] = useState();
  // ... same code you already have
}