es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo utilizar React Toggle dentro de la función Map

27 May, 2023 Programación

Estoy intentando usar un interruptor dentro de una función de mapa. Pensé que lo tenía, pero claramente hay algo mal en mi lógica. Cuando hago clic en algunos de los elementos de interruptor dentro del mapa, tengo que hacer clic en ellos dos veces para ver el cambio. Parece que sucede cuando activo un artículo como verdadero y luego activo inmediatamente otro artículo como verdadero. Gracias de antemano por cualquier ayuda.

Aquí está el 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>
  );
}
Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El problema con el alternador dentro de la función de mapa es que está utilizando el mismo estado para todos los elementos del array. Cuando se activa el alternador en un elemento, actualiza el estado para todos los elementos del array. Para solucionar este problema, es necesario almacenar el estado del alternador para cada elemento individualmente.

    Una forma de hacerlo es agregar una nueva propiedad a cada elemento del array people para almacenar su estado de alternador. Por ejemplo, puede agregar una propiedad itemPartToggle con un valor inicial de false.

    Luego, en la función onAddPartSelect, puede actualizar la propiedad itemPartToggle del elemento seleccionado solamente, en lugar de actualizar el estado para todos los elementos en el array.

    Aquí está el código actualizado con estos cambios:

    import React, { useState, useEffect } from "react";
import axios from "axios";
import "./styles.css";

export default function App() {
  const [people, setPeople] = useState([]);

  useEffect(() => {
    axios.get("./data.json").then((res) => {
      setPeople(
        res.data.people.map((person) => ({
          ...person,
          itemPartToggle: false // agregar nueva propiedad para almacenar el estado del alternador
        }))
      );
    });
  }, []);

  const onAddProdSelect = () => {
    // alternar el estado del alternador
    setProdToggle(!prodToggle);
  };

  const onAddPartSelect = (i) => {
    // crear un nuevo array con el estado del alternador actualizado para el elemento seleccionado y mantener el estado del resto de elementos
    const updatedData = people.map((item, idx) =>
      idx === i ? { ...item, itemPartToggle: !item.itemPartToggle } : item
    );
    setPeople(updatedData);
  };

  return (
    <main>
      <div onclick="{()" ==""> onAddProdSelect()}>
        {prodToggle ? "Rojo" : "Azul"}
      </div>
      {people.map((person, i) => (
        <div onclick="{()" ==""> onAddPartSelect(i)} key={i}>
          {person.itemPartToggle ? person.name : person.age}
        </div>
      ))}
    </main>
  );
}

    Ahora cada elemento en el array tiene su propio estado de alternador, y se puede alternar cada elemento de forma independiente sin afectar a los otros.

Comments are closed.