0
402
Visualizações¿Cómo cambiar la etiqueta de encabezado al hacer clic en el botón usando React?
La etiqueta del encabezado debe decir "Marco" para empezar y el botón muestra "polo". onClick deberían intercambiarse. Estoy usando useState y una matriz para hacer el trabajo. Deberían seguir intercambiándose. Pero después de una ronda, repiten. Supongo que en la tercera ronda. No puedo entender por qué sucede esto.
import React, { useState } from "react"; import "../styles/App.css"; const App = () => { let arr = ["Marco", "Polo"]; const [input, setInput] = useState(arr[0]); const [inputButton, setInputBUtton] = useState(arr[1]); const changethis = () => { // console.log("Clicked"); // console.log(arr); let temp = arr[0]; arr[0] = arr[1]; arr[1] = temp; console.log(arr); setInput(arr[0]); setInputBUtton(arr[1]); }; return ( <div id="main"> <h1 id="marco-polo">{input}</h1> <button id="marco-polo-toggler" onClick={changethis}> {inputButton} </button> </div> ); }; export default App;
cuando registro mi matriz en la consola, me sale así.
(2) ['Polo', 'Marco'] (2) ['Polo', 'Marco'] (2) ['Marco', 'Polo'] (2) ['Polo', 'Marco'] (2) ['Polo', 'Marco'] (2) ['Marco', 'Polo'] (2) ['Polo', 'Marco']3 Respostas
Responde à pergunta0
El problema es que cada vez que cambia el estado, el componente se vuelve a renderizar y su arr se reinicia.
puede colocar su matriz fuera de su componente para que no se redefina en cada representación o puede usar un índice de estado en su lugar
solución 1
import React, { useState } from "react"; import "../styles/App.css"; let arr = ["Marco", "Polo"]; const App = () => { const [input, setInput] = useState(arr[0]); const [inputButton, setInputBUtton] = useState(arr[1]); const changethis = () => { // console.log("Clicked"); // console.log(arr); let temp = arr[0]; arr[0] = arr[1]; arr[1] = temp; console.log(arr); setInput(arr[0]); setInputBUtton(arr[1]); }; return ( <div id="main"> <h1 id="marco-polo">{input}</h1> <button id="marco-polo-toggler" onClick={changethis}> {inputButton} </button> </div> ); }; export default App;solución 2
import React, { useState } from "react"; import "../styles/App.css"; const App = () => { let arr = ["Marco", "Polo"]; const [input, setInput] = useState(0); const [inputButton, setInputBUtton] = useState(1); const changethis = () => { // console.log("Clicked"); // console.log(arr); setInput(i => (i + 1) % arr.length); setInputBUtton(i => (i + 1) % arr.length); }; return ( <div id="main"> <h1 id="marco-polo">{arr[input]}</h1> <button id="marco-polo-toggler" onClick={changethis}> {arr[inputButton]} </button> </div> ); }; export default App;0
Tema
arr se vuelve a declarar en cada ciclo de procesamiento con el valor ["Marco", "Polo"] y cada tercera vez que se intercambian, la actualización del estado en cola tiene el mismo valor que el estado actual, por lo que se omite el procesamiento.
Solución
Mueva la declaración de la matriz arr fuera del componente para que su referencia sea estable. En lugar de mutar una variable arr que se vuelve a declarar cada ciclo de renderizado, solo debe intercambiar los valores de estado.
Ejemplo:
const arr = ["Marco", "Polo"]; export default function App() { const [input, setInput] = useState(arr[0]); const [inputButton, setInputBUtton] = useState(arr[1]); const changethis = () => { setInput(inputButton); setInputBUtton(input); }; return ( <div id="main"> <h1 id="marco-polo">{input}</h1> <button id="marco-polo-toggler" onClick={changethis}> {inputButton} </button> </div> ); } 
Si aún desea intercambiar los valores de la matriz arr , aún debe mover la matriz arr fuera del componente para que su valor no se restablezca en cada renderizado. Utilice la asignación de desestructuración de matrices para intercambiar los valores de la matriz.
Ejemplo:
const arr = ["Marco", "Polo"]; export default function App() { const [input, setInput] = useState(arr[0]); const [inputButton, setInputBUtton] = useState(arr[1]); const changethis = () => { [arr[1], arr[0]] = [arr[0], arr[1]]; // swap element values console.log(arr); setInput(arr[0]); setInputBUtton(arr[1]); }; return ( <div id="main"> <h1 id="marco-polo">{input}</h1> <button id="marco-polo-toggler" onClick={changethis}> {inputButton} </button> </div> ); }0
puede administrar su matriz en el estado y luego puede realizar una operación muy fácilmente. Tal vez el siguiente código sea útil para usted.
import React, { useState } from 'react'; import './style.css'; export default function App() { const [arr, setArray] = useState(['Marco', 'Polo']); const [input, setInput] = useState(arr[0]); const [inputButton, setInputBUtton] = useState(arr[1]); const changethis = () => { let temp = []; temp.push(arr[1], arr[0]); console.log(arr); setArray(temp); setInput(arr[0]); setInputBUtton(arr[1]); }; return ( <div id="main"> <h1 id="marco-polo">{input}</h1> <button id="marco-polo-toggler" onClick={changethis}> {inputButton} </button> </div> ); }