将状态更改应用于 React 中数组的特定索引

Posted 2023-02-14

【中文标题】将状态更改应用于 React 中数组的特定索引

【英文标题】：Applying state change to specific index of an array in React

【发布时间】：2022-01-22 19:07:56

【问题描述】：

喂！带着一个菜鸟问题再次回到它！

所以我从 API 获取数据来呈现一个测验应用程序，我正在努力使用一个简单的（我认为）函数： 我有一个包含 4 个答案的数组。该数组呈现 4 个 div（因此我的答案每个都可以有一个单独的 div）。我想更改点击的 div 的颜色，以便稍后验证点击的 div 是否是好的答案。

问题是当我点击时，整个答案数组（4 个 div）都在改变颜色。

我怎样才能做到这一点？

我对我正在渲染的 div 做了类似的事情：

const [on, setOn] = React.useState(false);

  function toggle() 
    setOn((prevOn) => !prevOn);
  

  const styles = 
    backgroundColor: on ? "#D6DBF5" : "transparent",
  ;

我将在文章末尾提供组件的完整代码和我正在使用的 API 链接，因此如果需要，您可以查看我是如何渲染整个内容的。

可能是因为 API 缺少其对象的“on”值？我尝试为每个项目分配一个布尔值，但我似乎无法使其工作。

提前感谢您的帮助！

整个组件：

import React from "react";
import  useRef  from "react";

export default function Quizz(props) 
  const [on, setOn] = React.useState(false);

  function toggle() 
    setOn((prevOn) => !prevOn);
  

  const styles = 
    backgroundColor: on ? "#D6DBF5" : "transparent",
  ;

  function shuffleArray(array) 
    for (let i = array.length - 1; i > 0; i--) 
      let j = Math.floor(Math.random() * (i + 1));
      let temp = array[i];
      array[i] = array[j];
      array[j] = temp;
    
    return array;
  

  let answers = props.incorrect_answers;

  const ref = useRef(false);
  if (!ref.current) 
    answers.push(props.correct_answer);

    shuffleArray(answers);
    ref.current = true;
  

  const cards = answers.map((answer, key) => (
    <div key=key className="individuals" onClick=toggle style=styles>
      answer
    </div>
  ));

  console.log(answers);
  console.log(props.correct_answer);

  return (
    <div className="questions">
      <div>
        <h2>props.question</h2>
      </div>
      <div className="individuals__container">cards</div>
      <hr />
    </div>
  );

我正在使用的 API 链接：“https://opentdb.com/api.php?amount=5&category=27&type=multiple”

【参考方案1】：

由于您的答案在每个测验中都是唯一的，因此您可以将它们用作 id，而不是将 boolean 值保留在状态中，您可以将所选答案保留在状态中，并且当您想要呈现您的JSX 您可以检查状态是否与当前答案相同，如果是，则可以像这样更改它的背景：

function Quizz(props) 
  const [activeAnswer, setActiveAnswer] = React.useState('');
  function toggle(answer) 
    setActiveAnswer(answer);
  
  ...
  const cards = answers.map((answer, key) => (
    <div key=key
         className="individuals"
         onClick=()=> toggle(answer)
         style=background: answer == activeAnswer ? "#D6DBF5" : "transparent" >
         answer
    </div>
));
  ...

【讨论】：

天哪！感谢您的快速答复人！它确实有效，它就像我想的一样简单哈哈，我知道我做了一些有点傻的事情，但我不知道是什么！再次感谢，祝您有美好的一天！

不客气。