0
669
Views¿Cómo evitar que useState vuelva a renderizar el componente?
import { nanoid } from 'nanoid'; import React from 'react'; export default function Question(props) { const answers = [...props.incorrect_answers, props.correct_answer]; const [selectedAnswer, setSelectedAnswer] = React.useState(); function handleChange(event) { setSelectedAnswer(event.target.value); console.log(event.target.value); } // Randomize answer of the Question function createRandom(arr) { let myArr = [...arr]; let randomizedArr = []; while (myArr.length > 0) { let randomIndex = Math.floor(Math.random() * myArr.length); randomizedArr.push(myArr[randomIndex]); myArr.splice(randomIndex, 1); } return randomizedArr; } const randomizedArr = createRandom(answers); // RadioButton for the answers const RadioButton = ({ label, value, onChange }) => { return ( <label> <input type="radio" name="answers" value={value} checked={selectedAnswer === value} onChange={onChange} /> {label} </label> ); }; const answersElements = randomizedArr.map((answer) => { return ( <RadioButton key={nanoid()} label={answer} value={answer} onChange={handleChange} /> ); }); return ( <div className="question-row"> <div className="single-question">{props.question}</div> <div className="answers">{answersElements}</div> </div> ); } 
Cuando selecciono una answer de botón de radio, React vuelve a representar el componente RaidoButton y llama a mi función Randomize que aleatoriza las respuestas. No sé cómo evitar que se llame a la función Randomize después de la primera vez. en las dos imágenes cuando selecciono una respuesta para la primera pregunta, las respuestas se aleatorizan nuevamente, quiero evitar este comportamiento
2 answers
Answer question0
Esta es una pregunta XY .
Necesita que el componente se vuelva a representar cuando cambie el estado (aunque solo sea para actualizar qué botón de opción está marcado).
El problema es que necesita que la función de aleatorización se ejecute solo en la carga inicial.
Cree un estado para la matriz aleatoria:
const [randomizedArr, setRandomizedArr] = useState([]);Luego, rellénelo en un gancho de efectos con una matriz de dependencias vacía (para que solo se ejecute en la carga inicial del componente).
useEffect(() => { const randomizedArr = createRandom(answers); setRandomizedArr(randomizedArr); }, []);0
const [randomizedArr, setRandomizedArr] = React.useState([]); const [selectedAnswer, setSelectedAnswer] = React.useState(); React.useEffect(() => { const answers = [...props.incorrect_answers, props.correct_answer]; const randomizedArr = createRandom(answers); setRandomizedArr(randomizedArr); }, [props.incorrect_answers, props.correct_answer]);