如何在多次渲染的 jsx 元素中渲染单个按钮/元素

Question

我是一个初学者，我正在尝试制作这个测验应用程序：[the app i'm trying to build ](https://i.stack.imgur.com/sB0z4.png)

所以基本上我一直想知道当用户点击选项的数量> = 4时，我应该如何在这些所有元素下方添加一个检查答案按钮 （请尽量用简单的英文解释）

This is my 'page1' files in which i'm basically doing all the app.jsx stuff example fetching the data from db and shuffling and also building the logic when a user clicks the options/answers`

import React from "react";
import { useRef, useEffect, useState } from "react";
import axios from "axios";
//import Quiz from "./Quiz";
import Template from "./Template";
import { nanoid } from "nanoid";

export default function Page1(props) {
  const [questions, setQuestions] = useState();
  const [quizData, setQuizData] = useState([]);
  const [selected, setSelected] = useState();
  const [options, setOptions] = useState();
  const [score, setScore] = useState(0);
  const [count, setCount] = useState(0);

  const [selectedAll, setSelectedAll] = useState(false);
  //const renderAfterCalled = useRef(false);

  React.useEffect(() => {
    //making difficulty etc a ${type} will be fun for the user
    fetch("https://opentdb.com/api.php?amount=5&category=21&type=multiple")
      .then((res) => res.json())
      .then((data) =>
        setQuizData(
          data.results.map((question) => {
            return {
              ...question,
              id: nanoid(),
              answers: handleShuffle([
                ...question.incorrect_answers,
                question.correct_answer
              ]),
              correct_answer: question.correct_answer
            };
          })
        )
      );
  }, []);
  function handleShuffle(arr) {
    let array = arr.map((ans) => {
      return {
        id: nanoid(),
        answer: ans,
        isSelected: false
      };
    });
    for (let i = array.length - 1; i > 0; i--) {
      let j = Math.floor(Math.random() * (i + 1));
      let temp = array[i];
      array[i] = array[j];
      array[j] = temp;
    }
    return array;
  }

  console.log(quizData);

  //the code below has bugs and errors to fix and a logic to understand
  function handleSelect(id, selectedAnsId) {
    console.log(id, selectedAnsId);
    setQuizData((prevQuizData) => {
      setCount((prev) => prev + 1);
      return prevQuizData.map((question) => {
        return question.id === id
          ? {
              ...question,
              answers: question.answers.map((answer) => {
                return answer.id === selectedAnsId
                  ? {
                      ...answer,

                      isSelected: !answer.isSelected

                      // answer: setCount(prev => prev + 1),
                    }
                  : { ...answer, isSelected: false };
              })
            }
          : question;
      });
    });
    console.log(count);
  }

  const newQuizData = quizData.map((question) => {
    return (
      <Template
        key={question.id}
        id={question.id}
        question={question.question}
        answers={question.answers}
        handleSelect={handleSelect}
        count={count}
        // plusIfCorrect= {plusIfCorrect}
        // justPlus = {justPlus}
      />
    );
  });
  return <div>{newQuizData}</div>;
}

And this is my Template file where i've set up the template of my quiz app

import React from "react";
import { useState, useEffect } from "react";

const Template = (props) => {
  const [error, setError] = useState(false);
  const [isSelected, setIsIsSelected] = useState(false);

  return (
    <>
      <div className="Page1">
        <h3>{props.question}</h3>
        <div className="options">
          {props.answers.map((answer) => {
            return (
              <button
                key={answer.id}
                className={`${
                  answer.isSelected ? "isSelected" : "transparent"
                }`}
                onClick={() => props.handleSelect(props.id, answer.id)}
              >
                {answer.answer}{" "}
              </button>
            );
          })}
        </div>
      </div>

      <hr />
      {props.count >= 3 && <button></button>}
    </>
  );
};

export default Template;

Answer 1

我认为您的问题与在 <Page1> 组件中声明多个组件有关。 const newQuizData 必须解析为 <Page1> 状态的道具，或者您可以尝试返回 <Page1> 组件：

    return (
        <div>
            {quizData.map((question) => (
                <Template
                    key={question.id}
                    id={question.id}
                    question={question.question}
                    answers={question.answers}
                    handleSelect={handleSelect}
                    count={count}
                    // plusIfCorrect= {plusIfCorrect}
                    // justPlus = {justPlus}
                 />
             )}
        </div>
    );