Estoy tratando de usar un interruptor dentro de una función de mapa. Pensé que lo tenía, pero claramente hay algo mal con mi lógica. Cuando hago clic en algunos de los elementos de alternancia dentro del mapa, tengo que hacer clic en ellos dos veces para ver el cambio. Parece suceder cuando cambio un elemento a verdadero, luego cambio inmediatamente otro elemento a verdadero. Gracias de antemano por cualquier ayuda.
Aquí está CodeSandbox: https://codesandbox.io/s/nice-hertz-srgew
Y el código:
import React, { useState, useEffect } from "react"; import axios from "axios"; import "./styles.css"; export default function App() { const [people, setPeople] = useState([]); const [prodToggle, setProdToggle] = useState(false); const [partToggle, setPartToggle] = useState(false); useEffect(() => { axios.get("./data.json").then((res) => { setPeople(res.data.people); }); }, []); const onAddProdSelect = () => { const updatedProdToggle = !prodToggle; setProdToggle(updatedProdToggle); }; const onAddPartSelect = (i) => { const updatedToggle = !partToggle; setPartToggle(updatedToggle); const updatedData = people.map((item, idx) => { if (idx === i) { return { ...item, itemPartToggle: updatedToggle }; } return item; }); setPeople(updatedData); }; return ( <main> <div onClick={() => onAddProdSelect()}> <p>{prodToggle ? "Red" : "Blue"}</p> </div> {people.map((person, i) => ( <div onClick={() => onAddPartSelect(i)} key={i}> <p>{person.itemPartToggle ? person.name : person.age}</p> </div> ))} </main> ); }Su problema es que está compartiendo el estado de alternancia con todos sus objetos de persona al tener el estado de partToggle . En su lugar, mantenga el estado de alternancia en cada objeto (como lo está haciendo actualmente con itemPartToggle ), y utilícelo para determinar a qué debe cambiar el valor de alternancia para ese objeto en particular en el que hizo clic:
const onAddPartSelect = (i) => { const updatedData = people.map((item, idx) => { if (idx === i) { return { ...item, itemPartToggle: !item.itemPartToggle // use the flipped version of the current toggle state for the current item }; } return item; }); setPeople(updatedData); };Vea el ejemplo a continuación:
const { useState } = React; function App() { const [people, setPeople] = useState([{"id":"1","name":"Bob","age":"21"},{"id":"2","name":"Ed","age":"45"},{"id":"3","name":"Mary","age":"32"},{"id":"4","name":"Tom","age":"76"}]); // hardcoding data for example const [prodToggle, setProdToggle] = useState(false); const onAddProdSelect = () => { const updatedProdToggle = !prodToggle; setProdToggle(updatedProdToggle); }; const onAddPartSelect = (i) => { const updatedData = people.map((item, idx) => { if (idx === i) { return { ...item, itemPartToggle: !item.itemPartToggle }; } return item; }); setPeople(updatedData); }; return ( <main> <div onClick={() => onAddProdSelect()}> <p>{prodToggle ? "Red" : "Blue"}</p> </div> {people.map((person, i) => ( <div onClick={() => onAddPartSelect(i)} key={i}> <p>{person.itemPartToggle ? person.name : person.age}</p> </div> ))} </main> ); } ReactDOM.render(<App />, document.body); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>