獲取陣列useStateReact中的下一個物件

我正在構建一個測驗網站作為 React 的練習，并希望能夠通過按鈕更改問題。當我手動將 useState(0) 更改為 1 時，下一個物件會呈現。但我無法讓它與按鈕一起作業。當我單擊按鈕時，它會直接跳轉到警報訊息。

function GetMovies() {
  useEffect(() => {
    fetchItems();
  }, []);

  const [items, setItems] = useState({ options: [] });

  const fetchItems = async () => {
    const data = await fetch("http://localhost:5000/api/movies");
    const items = await data.json();
    //test
    //console.log(items[currentQuestion]);
    setItems(items[currentQuestion]);
  };

  
  const [currentQuestion, setCurrentQuestion] = useState(0);

  //change question solution that dont work
  const HandleAnswerButtonClick = () => {
    const nextQuestion = setCurrentQuestion   1;
    if (nextQuestion < items.length) {
      setCurrentQuestion(nextQuestion);
    } else {
      alert("End of quiz");
    }
    setCurrentQuestion(nextQuestion);
  };

  return (
    <div className="App">
      <h1>Quiza</h1>
      <div>
        <span>Question 1</span>
      </div>
      <div>
        <h3>Question: {items.description}</h3>
        {items.options.map((c) => (
          <button value={c.is_correct} key={c.text}>
            {c.text}
          </button>
        ))}
        <div>
        {//Next BUTTON}
          <button onClick={() => HandleAnswerButtonClick()}>
            Next question
          </button>
        </div>
        {/* if-sats, om bild finns till fr?gan visas den, annars en class med display none */}
        <div className="Q_pics">
          {items.options.map((c) =>
            !c.image ? (
              <p className="Display_none">empty</p>
            ) : (
              <img src={c.image} alt={c.text}></img>
            )
          )}
        </div>
      </div>
    </div>
  );
}

我的 API 中的貓鼬模式

const MovieSchema = mongoose.Schema(
  {
    category: { type: String, required: true },
    description: { type: String, required: true },
    image: {
      type: String,
      required: false,
    },
    options: [
      {
        text: {
          type: String,
          required: true,
        },
        is_correct: {
          type: Boolean,
          required: true,
          default: false,
        },
        image: {
          type: String,
          required: false,
        },
      },
    ],
  },
  { collection: "movies" }
); 

uj5u.com熱心網友回復：

那是因為

const nextQuestion = setCurrentQuestion   1;

應該

const nextQuestion = currentQuestion   1;

哦，正如@Nick Parsons 在評論中提到的那樣，您也只在您的狀態中存盤第一個問題，因為fetchItems它只運行一次，并且您這樣做setItems(items[currentQuestion]);

你應該做類似的事情

function GetMovies() {
  const [items, setItems] = useState([]);    
  const [currentQuestion, setCurrentQuestion] = useState(0);

  const fetchItems = async () => {
    const data = await fetch("http://localhost:5000/api/movies");
    const items = await data.json();
    //test
    //console.log(items[currentQuestion]);
    setItems(items);
  };
  
  //change question solution that dont work
  const HandleAnswerButtonClick = () => {
    const nextQuestion = currentQuestion   1;
    if (nextQuestion < items.length) {
      setCurrentQuestion(nextQuestion);
    } else {
      alert("End of quiz");
    }
    setCurrentQuestion(nextQuestion);
  };

  useEffect(() => {
    fetchItems();
  }, []);

  const activeQuestion = items[currentQuestion];
  
  return (
    <div className="App">
      <h1>Quiza</h1>
      <div>
        <span>Question {currentQuestion   1}</span>
      </div>
      <div>
        <h3>Question: {activeQuestion && activeQuestion.description}</h3>
        {activeQuestion && activeQuestion.options.map((c) => (
          <button value={c.is_correct} key={c.text}>
            {c.text}
          </button>
        ))}
        <div>
        {//Next BUTTON}
          <button onClick={() => HandleAnswerButtonClick()}>
            Next question
          </button>
        </div>
        {/* if-sats, om bild finns till fr?gan visas den, annars en class med display none */}
        <div className="Q_pics">
          {activeQuestion && activeQuestion.options.map((c) =>
            !c.image ? (
              <p className="Display_none">empty</p>
            ) : (
              <img src={c.image} alt={c.text}></img>
            )
          )}
        </div>
      </div>
    </div>
  );
}

uj5u.com熱心網友回復：

代碼可能是這樣的：

  const [items, setItems] = useState({ options: [] });
    // currentIdx might be a better name
  const [currentIdx, setCurrentIdx] = useState(0);
  const fetchItems = async () => {
    const data = await fetch("http://localhost:5000/api/movies");
    const items = await data.json();
        //  save all data as Nick said. and items should be type of Data[];
    setItems(items);
  };
  const HandleAnswerButtonClick = () => {
    const nextQuestion = currentIdx   1;
    if (nextQuestion < items.length) {
      setCurrentIdx(nextQuestion);
    } else {
      alert("End of quiz");
    }
  };
    // use displayItem for render 
  const displayItem = useMemo(() => items[currentIdx], [items, currentIdx]);

我認為你最好學會使用開發工具并觀察你的代碼的價值??

標籤：javascript 数组 反应 接口 使用状态

上一篇：如何在反應中按地區自動設定國家代碼？

下一篇：axios獲取帶有正文和標題的請求