如何在不使用 axios 的情况下访问数组中的多个元素

Question

昨天在youtube上看到了一个React项目，想自己测试一下。

此功能连接到 link 和 returns 我使用按钮选择的类别和难度的问题。代码工作正常，但我不想用 axios 和任何 API 相关的东西来做这一步。

const fetchQuestions = async (category = "", difficulty = "") => {
const { data } = await axios.get(
  `https://opentdb.com/api.php?amount=10${
    category && `&category=${category}`                  
  }${difficulty && `&difficulty=${difficulty}`}&type=multiple`
);
  console.log(category);
  console.log(difficulty);

setQuestions(data.results);};

我只想看我选的难度和类别的题。所以我创建了一个 json 文件并试图用它来获取那些问题和答案等，但它没有用。我试图在内部映射事物并记录类别和难度，但我什至无法达到这些。我知道我需要一些条件等，但我无法创建逻辑。

const fetchQuestions =(category="",difficulty="")=>{const {data}=QuestionList.results.map((q)=> (console.log(category),console.log(q[category]),console.log(data),console.log(q[difficulty]))); setQuestions(data.results);}

这是 json 文件：questions.json -> 我导入为问题列表

{
"response_code": 0,
"results": [
  {
    "category": "Books",
    "type": "multiple",
    "difficulty": "medium",
    "question": "some question?",
    "correct_answer": "blabla",
    "incorrect_answers": ["Transformers", "Care Bears", "Rubik&rsquo;s Cube"]
  },
  {
    "category": "Books",
    "type": "multiple",
    "difficulty": "easy",
    "question": "sdklgksdflgjsdf",
    "correct_answer": "Badminton",
    "incorrect_answers": ["Table Tennis", "Rugby", "Cricket"]
  },
  {
    "category": "Books",
    "type": "multiple",
    "difficulty": "medium",
    "question": "fgdfgdfgdfgdfgg?",
    "correct_answer": "9",
    "incorrect_answers": ["6", "10", "3"]
  },
  {
    "category": "Films",
    "type": "multiple",
    "difficulty": "medium",
    "question": "asdasdasdasd",
    "correct_answer": "Parlor",
    "incorrect_answers": ["Open Room", "Sitting Room", "Loft"]
  },
  {
    "category": "Films",
    "type": "multiple",
    "difficulty": "medium",
    "question": "asdasdasddddd",
    "correct_answer": "Link",
    "incorrect_answers": ["Wario", "Q*bert", "Solid Snake"]
  }
]}

我已经坚持了 9 个小时，但我仍然没有解决方案:)

Answer 1

问题

const fetchQuestions = (category = "", difficulty = "") => {
  const { data } = QuestionList.results.map(
    (q) => (
      console.log(category),
      console.log(q[category]),
      console.log(data),
      console.log(q[difficulty])
    )
  );
  setQuestions(data.results);
};

上面的代码正在调用 Array.prototype.map 函数，但回调是 returning 逗号运算符表达式，最后一个操作数的 return 值是 returned .然而，console..log 是一个空值 return，因此 undefined 被 return 编辑为映射值。最重要的是，.map return 是一个数组，而不是一个对象，因此没有 data 属性可以从映射数组中解构。稍后访问 data.results 可能会抛出 TypeError，影响“无法访问未定义的 'results'”。

解决方案

如果我对你的问题的理解正确，你刚刚创建了一个导入的本地 questionList JSON 文件，你想按某些搜索条件过滤结果。

示例：

const [questions, setQuestions] = useState([]);

const fetchQuestions = (category = "", difficulty = "") => {
  const data = questionList.results.filter(
    (question) =>
      question.category.toLowerCase().includes(category.toLowerCase()) &&
      question.difficulty.toLowerCase().includes(difficulty.toLowerCase())
  );
  setQuestions(data);
};

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

fetchQuestions(); - return所有 5 个结果
fetchQuestions("books"); - return3 个“书籍”类别条目
fetchQuestions("", "easy"); - return第 1 个“简单”难度条目

如何在不使用 axios 的情况下访问数组中的多个元素

How to reach multiple elements in an array without using axios

javascript

reactjs

react-hooks

问题

解决方案