REACTJS aprendiendo aquí, tengo un problema muy extraño en REACTJS, cuando el modo estricto está deshabilitado, mi código funciona, pero cuando el modo estricto está activado, mi código no funciona. Cualquier ayuda sería muy apreciada. ¡Gracias! enlace a codesandbox = https://codesandbox.io/s/toggle-problem-6kr0b?file=/src/index.js Me pregunto por qué el modo estricto causaría tal impacto en mi código. ¡Gracias de antemano!
(App) //------------------------------------------ import { StrictMode } from "react"; import ReactDOM from "react-dom"; import Todo from './Hi' import App from "./App"; const rootElement = document.getElementById("root"); ReactDOM.render( <div> <App /> </div>, rootElement ); //-------------------------------------------------------------------------------------- import React, { useReducer } from "react"; function Texting() { const state = { list: [{ name: "i am nice", style: { color: "blue" } }] }; const [listt, dispatch] = useReducer(reducer, state); function reducer(listt, action) { switch (action) { case "toggle": console.log("hi"); const clone = [...listt.list]; if (clone[0].style.color === "blue") { clone[0].style = { color: "red" }; return { ...listt, list: clone }; } else { clone[0].style = { color: "blue" }; return { ...listt, list: clone }; } } } return ( <div> <fieldset> <legend>Clone with object</legend> <button onClick={() => { dispatch("toggle"); }} > Click me to toggle color! </button> <h2 style={listt.list[0].style}>Me</h2> {listt.list[0].style.color} </fieldset> </div> // <div> // Color = {listt.list.map((x) => x.style.color)} // <button onClick={() => dispatch("toggle")}>toggle!</button> // <h2 style={listt.list[0].style}> // I am awesome // </h2> // </div> ); } export default Texting;No he mirado tu código. Pero según tengo entendido, el componente se renderizará dos veces en modo estricto en lugar de solo una vez por cada cambio de estado o accesorios de entrada. Tal vez esa es la razón.
Una cosa más, debe colocar la función de reducción fuera del componente para que no se cree en cada renderizado. Debería funcionar como lo tiene ahora, pero por el bien del rendimiento es mejor definirlo fuera del componente.
En modo estricto, también debe corregir las advertencias. En el cambio, olvidaste el valor predeterminado. Consulte este enlace: https://codesandbox.io/s/toggle-problem-forked-hkijk
StrictMode se utiliza para conocer problemas potenciales en el momento del desarrollo. El problema con su código es que ha perdido el caso default en la declaración de cambio.
Intenta lo siguiente:
switch (action) { case "toggle": console.log("hi"); const clone = [...listt.list]; if (clone[0].style.color === "blue") { clone[0].style = { color: "red" }; return { ...listt, list: clone }; } else { clone[0].style = { color: "blue" }; return { ...listt, list: clone }; } default : return {...listt} }