javascript - 是否可以在另一个组件中显示来自 useState 的更新状态？

Question

我有这个使用的组件useState const [answers, setAnswerFunction] = useState(options);

在 answers此组件中更新状态后，我想使用更新后的状态并将其显示在另一个组件中。这可能吗？

我看了一个类似的问题，它说使用useContext我还没有调查过这个，因为我从未使用过它（是否可以使用 React 中的 useState() 钩子在组件之间共享状态？）但我想知道是否会有是一个更简单的方法？

代码：

const QuestionBox = ({
  question,
  options,
  correct,
  incrementScore,
  incrementResponse,

}) => {
  const [response, setResponse] = useState(""); 
  const [answers, setAnswerFunction] = useState(options);

  const computeAnswer = answer => {
    if (answer === correct) {
      setResponse("correct");
      incrementScore();
      incrementResponse();
    } else {
      setResponse("sorry wrong!");
      incrementResponse();
    }
  };

  return (
    <div className="questionBox">
      <div className="question"> {question} </div>
      {answers.map((answer, index) => {
        return (
          <button
            key={index}
            className="answerBtn"
            type="button"
            onClick={() => {
              setAnswerFunction([answer]); 
              computeAnswer(answer); 
            }}
          >
            {answer}
          </button>
        );
      })}
      {response === "correct" ? (
        <div className="correctResponse"> {response} </div>
      ) : (
        <div className="wrongResponse"> {response} </div>
      )}
    </div>
  );
};
export default QuestionBox;

我想answers通过 prop 在 Result 卡上显示来自组件 abover 的状态userAnswer：

const ResultCard = ({
  score,
  getQuestions,
  qbank,
  userAnswer
}) => {
  return (
    <div>
      <div>You scored {score} out of 5! </div>

      <div className="playBtnBox">
        <button className="playBtn" type="button" onClick={getQuestions}>
          Play again
        </button>
      </div>

      <div>
        {qbank.map((questionObject) => {
          return (
            <div>
              <div className="questionBox"> {questionObject.question}</div>
              <div className="resultCardCorrect"> Correct Answer: {questionObject.correct}</div>

            </div>
          );
        })}
      </div>
      <div className="resultCardCorrect"> Your Answer: {userAnswer}</div>
    </div>
  );
};

export default ResultCard;

标签： javascriptreactjs