Así que estoy tratando de codificar una oración o cadena y empujar las palabras en una matriz para luego unirlas y generar esta oración codificada, pero por alguna razón, useEffect no se ejecuta en el primer procesamiento, incluso con una matriz vacía, pero cuando cambio una línea y ejecutarlo de nuevo se ejecuta según lo previsto. Me preguntaba si estaba haciendo algo mal y cómo puedo cambiarlo para que se ejecute en el primer renderizado.
const ScrambleSentence = ({sentence}) => { const [words, setWords] = useState([]); const [scrambledSentence, setScrambledSentence] = useState(''); let scrambledWord = []; function scrambleWord(n){ var text = n.split(''); for(var i = text.length - 1; i > 0; i--){ var j = Math.floor(Math.random() * (i + 1)); var temp = text[i]; text[i] = text[j]; text [j] = temp; } return text.join(''); } useEffect(() => { setWords(sentence.split(' ')); words.map(word =>{ if(word.length <= 2){ scrambledWord.push(word); } else{ scrambledWord.push(scrambleWord(word)); } }) setScrambledSentence(scrambledWord.join(' ')); }, []) console.log(scrambledSentence); return ( <div> <p id='scrambled-word'>{scrambledSentence}</p> </div> ) }; export default ScrambleSentence;useEffect se llama después del primer procesamiento; sin embargo, el problema en su código es que el estado de las palabras no se actualiza cuando cree que sí.
useEffect(() => { setWords(sentence.split(' ')); // Here you set the words state that will trigger a new render. However the words variable is empty won't be changed until the next render words.map(word =>{ //Here you call map on an empty array. if(word.length <= 2){ scrambledWord.push(word); } else{ scrambledWord.push(scrambleWord(word)); } }) setScrambledSentence(scrambledWord.join(' ')); //Here you set the state on an empty string }, []) // the useEffect doesn't run a second time because it has no dependencies.Este código debería funcionar:
const ScrambleSentence = ({sentence}) => { const [scrambledSentence, setScrambledSentence] = useState(''); function scrambleWord(n){ var text = n.split(''); for(var i = text.length - 1; i > 0; i--){ var j = Math.floor(Math.random() * (i + 1)); var temp = text[i]; text[i] = text[j]; text [j] = temp; } return text.join(''); } useEffect(() => { let scrambledWord = []; const words = sentence.split(' ') words.forEach(word =>{ if(word.length <= 2){ scrambledWord.push(word); }else{ scrambledWord.push(scrambleWord(word)); } }) setScrambledSentence(scrambledWord.join(' ')); }, []) console.log(scrambledSentence); return ( <div> <p id='scrambled-word'>{scrambledSentence}</p> </div> ) }; export default ScrambleSentence;Los efectos no se ejecutan durante un render.
La primera ejecución de una función de efecto será desencadenada por el primer renderizado.
El siguiente código no funcionará ya que el mapa necesita una declaración de devolución, por lo que no estaría definido, useEffect consolará la matriz vacía como se define en el estado. Además, no debe usar dejar entrar componentes de renderizado, ya que siempre se iniciará, el uso puede ser useRef para eso. Además, si su componente consiste en código js, es mejor convertirlo en un archivo auxiliar y usarlo, ahorraría y aumentaría el rendimiento.
words.map(word =>{ if(word.length <= 2){ scrambledWord.push(word); } else{ scrambledWord.push(scrambleWord(word)); } })