在React中單擊時狀態未更新

我需要在點擊時更新播放器狀態（setPlayerState），但它沒有按時完成。我的意思是，它稍后會更新，所以我只有在第二次點擊后狀態再次改變時才獲得第一個狀態。有誰知道如何解決這個問題？

  const [player, setPlayerState] = useState({
    name,
    assertions: 0,
    score: 0,
    gravatarEmail,
  });

  function handleClick({ target }) {
    const id = target.getAttribute('data-testid').includes('correct');
    let points = 0;
    if (id) {
      const level = questions[index].difficulty;
      if (level === 'hard') points = THREE;
      else if (level === 'medium') points = TWO;
      else points = ONE;
      setPlayerState({
        ...player,
        assertions: player.assertions   1,
        score: player.score   (TEN   (timer * points)),
      });
    }
  }

uj5u.com熱心網友回復：

您的代碼中的一些要點很突出

• 您在條件index內部參考但未設定。if(id) ...index
• ONE, TWO,THREE和TEN未設定。
• 問題評分邏輯與狀態更新邏輯糾纏不清

這是一個最小的完整示例，它修復了這些問題并展示了一種更好的撰寫方式onClick。運行代碼示例并單擊question按鈕分別查看如何assertions和score更新。

function App({ questions = [] }) {
  const [player, setPlayer] = React.useState({
    name: "Hanna",
    assertions: 0,
    score: 0,
  })
  function calcScore(difficulty) {
    switch (difficulty) {
      case "hard": return 3
      case "medium": return 2
      default: return 1
    }
  }
  function onClick(question) { return event => {
    if (event.target.getAttribute("data-test-id").includes("correct"))
      setPlayer({
        ...player,
        assertions: player.assertions   1,
        score: player.score   calcScore(question.difficulty)
      })
  }}
  return <div>
    {questions.map((q, key) =>
      <button key={key} data-test-id="correct" onClick={onClick(q)}>
        {q.ask}
      </button>
    )}
    <pre>{JSON.stringify(player, null, 2)}</pre>
  </div>
}
const questions = [
  { ask: "What is?", difficulty: "easy" },
  { ask: "How come?", difficulty: "medium" },
  { ask: "Seriously?", difficulty: "hard" }
]
ReactDOM.render(<App questions={questions} />, document.querySelector("#app"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.14.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.14.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>

uj5u.com熱心網友回復：

添加點擊狀態并useEffect回應它的變化。它有效地強制重新渲染兩次。

還可以嘗試使用以前的值引數 setPlayerState ，即setPlayerState(player => 在沒有注意到更新時有時會有所幫助。

  const [player, setPlayerState] = useState({
    name,
    assertions: 0,
    score: 0,
    gravatarEmail,
  });

  const [clickTarget, setClickTarget] = useState(null)

  function handleClick({ target }) {
    setClickTarget(target )
  }

  useEffect(() => {
    if (!clickTarget) return

    const id = clickTarget.getAttribute('data-testid').includes('correct');
    let points = 0;
    if (id) {
      const level = questions[index].difficulty;

      points = (level === 'hard') ? THREE :
        (level === 'medium') ? TWO : ONE;

      setPlayerState(player => ({
        ...player,
        assertions: player.assertions   1,
        score: player.score   (TEN   (timer * points)),
      }))
    }
    setClickTarget(null)
  }, [clickTarget])

uj5u.com熱心網友回復：

您可以嘗試使用以下代碼塊替換呼叫的setState函式，以確保狀態更新：

setPlayerState(s => ({
    ...s,
    assertions: s.assertions   1,
    score: s.score   (TEN   (timer * points)),
}));

標籤：javascript 反应 反应式 反应钩子

上一篇：ReactNative：無法訪問導航引數

下一篇：在片段上實作帶有回呼的介面