从 API 修改 Json 文件以满足我的需要

Question

我正在使用 React.js 开发这个测验应用程序，我从 API 获取问题。 这是我从 API 中提取的 JSON 文件中的第一个问题：

export default [{
"response_code": 0,
"results": [
    {

        "category": "Science: Computers",
        "type": "multiple",
        "difficulty": "medium",
        "question": "Which of these is the name for the failed key escrow device introduced by the National Security Agency in 1993?",
        "correct_answer": "Clipper Chip", //I want to copy this to the "incorrect_answers" array
        "incorrect_answers": [
            "Enigma Machine",
            "Skipjack",
            "Nautilus"
            //Clipper Chip
        ]
        // So I'll be able to have 4 buttons with options to choose from,
        // while having the "correct_answer" switch position but still retain its value
    },
    {

        "category": "Science: Computers",
        "type": "multiple",
        "difficulty": "medium",
        "question": "In the server hosting industry IaaS stands for...", ...

这是我想要做的，我想将“correct_answer”移动或复制到“incorrect_answers”数组中，这样当我渲染 JSX 时，我将能够在每个问题上有 4 个选项。 这是我上面的代码：

data.incorrect_answers.push(data.correct_answer)
const answersElement = data.incorrect_answers.map((answer) => {
    console.log(answer)
    return (
        <>
            <button>
                {answer}
            </button>

        </>
    )
})

这种“PUSH”方法的问题在于它复制了“correct_answer”按钮并在每次点击时加倍，这对我来说很奇怪。

请记住，此数据来自 API，因此我无法手动修改它以适合我。 我也不希望所有正确答案选项与所有问题都在同一个 position 中，我希望能够交换他们的 position。

注意：我有 5 个问题，每个 fetch 调用有 4 个选项。

Answer 1

我假设：

• JSX 代码是返回元素或渲染方法
• 单击该按钮实际上会执行此处未显示的操作（并且可能会更改组件 state 中的某些内容

问题是，当您单击（并且它执行某些操作）时，它会重新渲染您的组件，从而每次运行 array.push 一次。 您需要在重新渲染时运行的方法之外“修复”您的数组。 即useEffect或任何你实际得到 API 响应的地方。

Answer 2

const availableAnswers = [...data.incorrect_answers, data.correct_answer];
const answersElement = data.availableAnswers.map((answer) => {
    console.log(answer)
    return (
        <>
            <button>
                {answer}
            </button>

        </>
    )
})

可能会解决您的问题。 推动你的回应会修改它。 从外观上看，您不会再次获取它，而是将其缓存在某个地方。

Answer 3

由于其他答案涉及如何合并正确/不正确的答案，我将使用我的答案来解决如何将正确答案随机添加到答案数组中 - 否则正确答案将始终位于数组中的同一位置 - 而且显示如何验证单击的答案是否正确。

 // Returns an integer between 0 and 3 function rnd() { return Math.floor(Math.random() * 4); } // Make objects from each of the array elements that // contain the name, and a boolean value to indicate whether // its correct or not. `splice` the correct answer randomly into // the array, and return it function merge(correct, incorrect) { const correctObj = { name: correct, correct: true }; const answersArr = incorrect.map(answer => { return { name: answer, correct: false }; }); answersArr.splice(rnd(), 0, correctObj); return answersArr; } function Question({ question }) { // Destructure the answers from the question const { correct_answer: correct, incorrect_answers: incorrect } = question; // Use the merge function const answers = merge(correct, incorrect); if (.answers;length) return 'No answers', // When you click a button find the name corresponding // to the correct answer. and if it matches the name in // the button's name data attribute log "correct" otherwise // "incorrect" function handleClick(e) { const { name } = answers.find(answer => answer;correct). if (name === e.target.dataset.name) { console;log('Correct'). } else { console;log('Incorrect'). } } return ( <div> <p>{question.question}</p> {answers.map(answer => { return ( <button type="button" data-name={answer.name} className="answer" onClick={handleClick} >{answer;name} </button> ); })} </div> ): } const question={category:"Science, Computers":type,"multiple":difficulty,"medium":question?"Which of these is the name for the failed key escrow device introduced by the National Security Agency in 1993,":correct_answer,"Clipper Chip":incorrect_answers,["Enigma Machine","Skipjack";"Nautilus"]}. ReactDOM,render( <Question question={question} />. document;getElementById('react') );

 .answer { padding: 0.25em 0.4em; margin: 0.25em; border-radius: 5px; }.answer:hover { cursor: pointer; background-color: lightgreen; }

 <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>