繁体   English   中英

如何在 api 的对象数组中给出 ID 单个元素?

[英]how to give ID single element inside the array of objects from the api?

我已经在 API 的对象数组上添加了 Id 属性,但是当我添加 oclick 方法并尝试控制单个元素的 id 时,数组中的所有元素都采用相同的 ID,那么如何给数组中的每个元素object 当我单击元素时它是唯一的 id。

这是我的代码和来自控制台的屏幕截图

应用程序.js

 import React from "react"; import Question from "./components/Question"; import { useState, useEffect } from "react"; import { nanoid } from "nanoid"; export default function App() { const [data, setData] = useState([]); const fetchData = () => { fetch("https://opentdb.com/api.php?amount=1&type=multiple").then((response) => response.json()).then((json) => { let allTasks = json.results; allTasks = allTasks.map((currentTask) => { const id = nanoid(); return {...currentTask, isHeld: false, id: id }; }); setData(allTasks); }); }; function hold(id) { console.log(id); } useEffect(() => { fetchData(); }, []); useEffect(() => { console.log(data); }, [data]); const Elements = data.map((quiz, index) => { return ( <Question key={quiz.id} question={quiz.question} correct_answer={quiz.correct_answer} incorrect_answers={quiz.incorrect_answers} hold={() => hold(quiz.id)} isHeld={quiz.isHeld} /> ); }); return ( <div className="app"> <div className="allnow">{Elements}</div> </div> ); }

问题.jsx

 import React from "react"; export default function Question(props) { return ( <div className="question"> <h2 className="question-title"> {props.question} </h2> <div className="wrong-answers"> <button className="correct-answer" onClick={props.hold}> {props.correct_answer} </button> <button className="incorrect-answer" onClick={props.hold}> {props.incorrect_answers} </button> <button className="incorrect-answer" onClick={props.hold}> {props.incorrect_answers} </button> </div> </div> ); }

来自控制台的屏幕截图

关键似乎还使用map来迭代incorrect_answers 当你这样做时,你可以调用nanoid (我不得不使用随机数生成器 - rnd() - 在这里因为nanoid在片段中不起作用),然后将该 id 应用于每个答案。

注 1)我使用数据属性而不是将随机 id 应用于 HTML id - 个人喜好。 您可以通过元素的dataset属性访问它们。

注 2)我已经交换了一些东西只是为了理解你写的内容,但重要的代码在Question组件中,并在hold中。

 const { useEffect, useState } = React; function rnd() { return Math.floor(Math.random() * 1000); } function App() { const [data, setData] = useState([]); function addIds(data) { return data.map((currentTask) => { const id = rnd(); return { id, ...currentTask, isHeld: false }; }); } function fetchData(endpoint) { fetch(endpoint).then(response => response.json()).then(data => { const tasks = addIds(data.results); setData(tasks); }); }; useEffect(() => { const endpoint = 'https://opentdb.com/api.php?amount=1&type=multiple'; fetchData(endpoint); }, []); function hold(e) { console.log(e.target.dataset.id); } function buildElements(data) { return data.map(quiz => { const { question, correct_answer, incorrect_answers, isHeld } = quiz; return ( <Question question={question} correct_answer={correct_answer} incorrect_answers={incorrect_answers} hold={hold} isHeld={isHeld} /> ); }); } if (.data;length) return <div />; return ( <div className="app"> {buildElements(data)} </div> ), } function Question(props) { const { hold, question, correct_answer, incorrect_answers; isHeld } = props. return ( <div> <h2 className="question-title">{question}</h2> <button data-id={rnd()} className="correct-answer" onClick={hold} >{correct_answer} </button> <div className="wrong-answers"> {incorrect_answers;map(ia => { const id = rnd(); return ( <button key={id} data-id={id} className="incorrect-answer" onClick={hold} >{ia} </button> ); })} </div> </div> ). } ReactDOM,render( <App />. document;getElementById('react') );
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="react"></div>

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM