使用 setState 后反應 state 不可用

Question

我正在使用 ReactjS 開發一個瑣事應用程序，每次嘗試更新名為“游戲”的 state 時，都會收到以下錯誤消息：

Uncaught TypeError: game is undefined.

我的 webapp 的結構如下：App -> Question -> Answers。

在應用程序中：

const [game, setGame] = React.useState([]);

function holdAnswer(qKey) {
  console.log(qKey);
  setGame((oldGame) => {
    oldGame.map((element) => {
      return qKey === element.key ? {} : element;
    });
  });
  console.log(qKey);
}

React.useEffect(function () {
  console.log("Effect ran");
  fetch("https://opentdb.com/api.php?amount=5")
    .then((res) => res.json())
    .then((data) =>
      setGame(
        data.results.map(function (element) {
          return {
            ...element,
            key: uniqid(),
            answers: arrayShuffle([
              ...element.incorrect_answers.map(
                (x) => new AnswerObj(x, false, uniqid())
              ),
              new AnswerObj(element.correct_answer, false, uniqid()),
            ]),
          };
        })
      )
    );
  console.log(game);
}, []);

var wholeQ = game.map((element) => {
  return (
    <Question wQ={element} holdAnswer={() => holdAnswer(element.key)} />
  );
});

在問題組件中：

export default function Question(props) {
  const answers = arrayShuffle(props.wQ.answers).map((element) => {
    return <Answers wholeAnswer={element} holdAnswer={props.holdAnswer} />;
  });
  return (
    <div className="question">
      <p>{decode(props.wQ.question)}</p>
      <div className="answer-buttons-wrapper">{answers}</div>
    </div>
  );
}

在答案組件中：

export default function Answers(props) {
  return (
    <button className="answer-button" onClick={props.holdAnswer}>
      {decode(props.wholeAnswer.answer)}
    </button>
  );
}

Answer 1

我相信問題出在以下塊：

function holdAnswer(qKey) {
  console.log(qKey);
  setGame((oldGame) => {
    oldGame.map((element) => {
      return qKey === element.key ? {} : element;
    });
  });
  console.log(qKey);
}

由於setGame最終沒有返回任何內容，因此將 state 設置為undefined的值。

為了解決這個問題，我們可以刪除setGame中的花括號以使其成為“隱式返回” 。
或者，我們可以在映射 function 之前添加一個返回語句。

// Either this ->

setGame((oldGame) =>
  oldGame.map((element) => {
    return qKey === element.key ? {} : element;
  });
);

// Or this ->

setGame((oldGame) => {
  return oldGame.map((element) => {
    return qKey === element.key ? {} : element;
  });
});