第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

如何在Reactjs中創(chuàng)建一個(gè)不被事件監(jiān)聽(tīng)器調(diào)用的函數(shù)?

如何在Reactjs中創(chuàng)建一個(gè)不被事件監(jiān)聽(tīng)器調(diào)用的函數(shù)?

九州編程 2024-01-18 16:24:27
我是 ReactJS 的初學(xué)者,正在嘗試創(chuàng)建一個(gè)簡(jiǎn)單的測(cè)驗(yàn)應(yīng)用程序。我想要做的可以在selectionQues()函數(shù)中看到。import React,{useState,useEffect} from 'react';import './App.css';import Question from './components/Question';function App() {  const [ques, setques] = useState([]);  const [currentQues, setcurrentQues] = useState([]);  //importing ques using api  useEffect(() =>{    fetch('https://opentdb.com/api.php?amount=20&category=18&difficulty=medium&type=multiple')    .then((res)=> res.json())    .then((question) => {      setques(question.results);    });  },[setques])  //selecting 5 ques at random for our quiz  const selectingQues = () => {    let curr=[];    let qlen=ques.length;    for(let i=0;i<5;i++){      let selector= Math.floor(Math.random()*qlen);      curr[i]=ques[selector];    }    setcurrentQues(curr);    // console.log(ques);  }  return (    <div className="App">        <Question currentQues={currentQues}/>    </div>  );}export default App;現(xiàn)在我想做的是調(diào)用此 SelectingQues() 而不顯式使用 onClick 監(jiān)聽(tīng)器或類似的東西。使用 useEffect 可以實(shí)現(xiàn)這一點(diǎn)嗎?但我希望它在調(diào)用第一個(gè) useEffect 后執(zhí)行。問(wèn)題組件未附加,因?yàn)樗皇秋@示問(wèn)題。
查看完整描述

1 回答

?
飲歌長(zhǎng)嘯

TA貢獻(xiàn)1951條經(jīng)驗(yàn) 獲得超3個(gè)贊

想法:主要想法是在 API 調(diào)用中獲取 Questions 數(shù)組,并確保在那里隨機(jī)獲取 5 個(gè)問(wèn)題。我的做法是,一旦我從 API 調(diào)用接收到數(shù)據(jù),我就會(huì)執(zhí)行promise chaining并處理所有代碼,以在另一個(gè)then()塊中獲取 5 個(gè)隨機(jī)問(wèn)題。當(dāng)我收到 5 個(gè)隨機(jī)問(wèn)題時(shí),我將狀態(tài)保存為currentQues.

Codesandbox 演示

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

import "./App.css";


function App() {

  const [currentQues, setcurrentQues] = useState([]);


  //importing ques using api

  useEffect(() => {

    selectingQues();

  }, []);


  // selecting 5 ques at random for our quiz


  const selectingQues = async () => {

    const response = await fetch(

      "https://opentdb.com/api.php?amount=20&category=18&difficulty=medium&type=multiple"

    );


    const data = await response.json();


    console.log(data);

    const initialQuestions = data.results;

    let curr = [];

    // console.log(initialQuestions.length);

    let length = initialQuestions.length;

    for (let i = 0; i < 5; i++) {

      let selector = Math.floor(Math.random() * length);

      curr[i] = initialQuestions[selector];

    }

    setcurrentQues(curr);

  };


  return (

    <div className="App">

      {currentQues.length > 0 && <Question currentQuestions={currentQues} />}

    </div>

  );

}


export default App;


const Question = ({ currentQuestions }) => {

  // const { question, correct_answer } = question;

  console.log(currentQuestions);

  return (

    <>

      {currentQuestions.map((question) => (

        <div key={question.question}>

          <p>

            <strong>Question:</strong> {question.question}

          </p>


          <p>

            <strong>Answer:</strong> {question["correct_answer"]}

          </p>

        </div>

      ))}

    </>

  );

};


查看完整回答
反對(duì) 回復(fù) 2024-01-18
  • 1 回答
  • 0 關(guān)注
  • 125 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)