Cómo usar el mapa antes de establecer el estado

2 minutos de lectura

Avatar de usuario de Still_Learning
Aún aprendiendo

Estoy tratando de cambiar el valor del booleano de los datos simulados en onClick. Estoy manteniendo el estado para mantener los valores simulados. Necesito cambiar el valor booleano de verdadero a falso. Y luego necesito establecer ese valor falso en el estado. Cuando estoy haciendo el registro de la consola, puedo ver los tres elementos del simulacro, pero cuando trato de seleccionar el valor, se muestra como indefinido. He publicado el código a continuación, cualquiera puede guiarme en lo que estoy haciendo mal. ¡Gracias por adelantado!

Datos simulados:

const custDetail = {
    customers: [
      {
        name: "Abc",
        isCreated: true,
      },
      {
        name: "bcd",
        isCreated: true,
      },
      {
        name: "Dec",
        isCreated: true,
      },
    ],
  };

Código:

const [creatingCust, setCreatingCust] = useState([custDetail])

const onHandle = () => {
const custData = [...creatingCust]
custData.map((customerData) => (
  //console.log(customerData.customers.isCreated) is giving undefined but if I removed
  //isCreated I am getting values
  customerData.customers.isCreated === false
  setState(custData)
))

  • customers es una matriz. Asi que customers.isCreated debiera ser customers[index].isCreated

    – Spikatrix

    Hace 9 horas

avatar de usuario de binbash
binbash

En primer lugar, cree datos simulados de sus clientes como este:

const custDetail = [
  { 
    name:'Abc',
    isCreated:true
  },
  {
    name:'bcd',
    isCreated:true
  },
  {
    name:'Dec',
    isCreated:true
  }
]

Ojo con la colocación de tu cotización. No puedes empezar con un " y terminar con un '

No necesitas la parte con = { clientes:[ because with this you are creating an object with one key value pair which contains an array of your objects.

Second, remove the brackets in your useState. So it should look like this:

const [creatingCust, setCreatingCust] = useState(clienteDetalle)

Si usa los corchetes, solo está envolviendo sus datos en otra matriz.

Y para responder a tu pregunta. Si realiza estos cambios, puede utilizar el .map función para reemplazar el valor. Entonces puedes hacer algo como esto:

const changeValues = () => {
  const newData = creatingCust.map(customer => {
    return {
      ...customer,
      isCreated: false
    }
  });
  setCreatingCust(newData)

  • ¡Buena respuesta! Además, al arreglar el mapeo (para devolver los nuevos datos que están configurados), olvidó comentar una de las fallas más grandes en el código del OP: el estado nunca debe mutarse (como lo estaban haciendo dentro de su original .map llamar). En cambio, el patrón correcto es lo que tiene aquí: crear inmutablemente algunos datos nuevos (por ejemplo, mediante el mapeo) y luego establecer el estado en los nuevos datos, reemplazando los antiguos sin mutarlos.

    – Nathan

    hace 7 horas


¿Ha sido útil esta solución?