如何在Reactjs中创建一个不被事件监听器调用的函数？

Question

我是 ReactJS 的初学者，正在尝试创建一个简单的测验应用程序。我想要做的可以在selectionQues()函数中看到。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;现在我想做的是调用此 SelectingQues() 而不显式使用 onClick 监听器或类似的东西。使用 useEffect 可以实现这一点吗？但我希望它在调用第一个 useEffect 后执行。问题组件未附加，因为它只是显示问题。

Answer 1

想法：主要想法是在 API 调用中获取 Questions 数组，并确保在那里随机获取 5 个问题。我的做法是，一旦我从 API 调用接收到数据，我就会执行promise chaining并处理所有代码，以在另一个then()块中获取 5 个随机问题。当我收到 5 个随机问题时，我将状态保存为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>

      ))}

    </>

  );

};