solución: cambié el gancho a:
const [flagC, setFlagC] = useState(props.cars[i].state===on? 'green' : 'red');y la función de:
const onOff=()=>{debugger; if(props.cars[i].state===on){ setFlagC('red'); props.cars[i].state=off; } else if(props.cars[i].state===off){ setFlagC('green'); props.cars[i].state=on; } }tengo una matriz en mi app.js que contiene autos y cada auto tiene un estado activado/desactivado:
let cars=[{name: 'mazda', state: off},{name:'toyota', state:off},{name: 'volvo', state:off}];
ahora tengo un componente que recibe esta matriz y muestra cada automóvil en un botón diferente (usando el mapa en app.js):
{cars.map((val,i)=>{ return <ComponentName carName={val.name} index={i}/> })} Creé dentro del componente un gancho que tiene color rojo: const[flagC,setFlagC]=useState('red');
y una función que se supone que verifica cuál es el estado del automóvil y si está apagado, establece el color de fondo del botón rojo y si está encendido, establece el estado como "encendido". cambia el color del automóvil, pero cuando paso a otra página en la aplicación, lo vuelve a configurar en rojo pero el estado permanece encendido. que necesito cambiar?
aquí está la función:
const[flagC,setFlagC]=useState('red'); const onOff=()=>{debugger; if(props.cars[i].state===on){ props.cars[i].state=off; setFlagC('red'); } if(props.cars[i].state===off){ props.cars[i].state=on; setFlagC('green'); } }el valor obtiene el auto correcto por índice y el gancho es el estilo del botón + el botón tiene onClick.
<button style={{backgroundColor: flagC}} onClick={onOff}>{props.carName}</button>No está actualizando su estado de color cuando se carga el componente. Sugiero lo siguiente:
const [color, setColor] = useState(props.cars[i].state===on ? 'green' : 'red')
Explicación: Cada vez que el componente se monta, usa el valor inicial para el estado hasta que actualice el estado según los datos entrantes (props o no). Si los datos vienen como accesorios, puede definir su estado para que tenga el valor inicial tan pronto como llame a useState, si los datos provienen de una llamada de función o un cambio asíncrono o redux, entonces debe usar useEffect para actualizar su estado.
Dado que parece que sus datos vienen como accesorios, puede escribir useState(props match condiction ? valueOne: valueTwo)