Tengo el siguiente código:

export default function App() {
  function handleChange(value) {
    console.log(`selected ${value}`);
    const r = JSON.parse(localStorage.getItem("data")).map((i) => {
      if (i.color === value) {
        return {
          ...i,
          test: [{ t: 1, y: 5 }]
        };
      }
    });
    localStorage.setItem("data", JSON.stringify(r));
  }
  const cars = [
    {
      car: "bmw",
      price: 10,
      color: "red"
    },
    {
      car: "audi",
      price: 55,
      color: "white"
    },
    {
      car: "opel",
      price: 45,
      color: "blue"
    }
  ];
  localStorage.setItem("data", JSON.stringify(cars));
  return (
    <div className="App">
      <p>write in localstorage</p>
      <Select
        placeholder="colors"
        style={{ width: 120 }}
        onChange={handleChange}
      >
        <Option value="red">red</Option>
        <Option value="blue">blue</Option>
        <Option value="blue">white</Option>
        <Option value="blue">black</Option>
      </Select>
    </div>
  );
}

Quiero, cuando seleccione un valor y ese valor será igual a color de la matriz, agregar propiedad adicional dentro de ese objeto que se ajuste a la condición (if (i.color === value) {). Entonces, al final, quiero obtener algo como esto:

[
    {
      car: "bmw",
      price: 10,
      color: "red"
    },
    {
      car: "audi",
      price: 55,
      color: "white"
    },
    {
      car: "opel",
      price: 45,
      color: "blue"
      test: [{t: 1, y: 5}, {t: 1, y: 5}, {t: 1, y: 5}] // length depends by how                many times i select somthing that fits the condition
]
    }
  ]
  
  //another example
  
  [
    {
      car: "bmw",
      price: 10,
      color: "red"
    },
    {
      car: "audi",
      price: 55,
      color: "white"
      test: [{t: 1, y: 5}, {t: 1, y: 5}, {t: 1, y: 5}] // user clicked 3 times on white
    },
    {
      car: "opel",
      price: 45,
      color: "blue"
      
]
    }
  ]

Pregunta: ¿Cómo obtener lo que describí? Ahora obtengo nulo si selecciono por primera vez.
demostración: https://codesandbox.io /s/sleepy-euler-4ce8y?file=/src/App.js

1
AskMen 9 ago. 2020 a las 19:52

2 respuestas

La mejor respuesta

Hice algunas correcciones.

Mira esta caja de arena

https://codesandbox.io/s/reverent-dirac-vjfoi

La solución principal es esta

const r = JSON.parse(localStorage.getItem("data")).map((i) => {
  if (i.color === value) {
    return {
      ...i,
      test: i.test ? [...i.test, { t: 1, y: 5 }] : [{ t: 1, y: 5 }]
    };
  } else return { ...i };
});

Cuando el color es igual al seleccionado, si existe la prueba, agregue el objeto adicional, de lo contrario, inicialice una nueva matriz.

Si no es así, devuelva el objeto.

1
Apostolos 9 ago. 2020 a las 17:05

En la última parte del código, donde realmente escribe el sitio web, tiene las últimas cuatro opciones con la clave "azul". Intente cambiarlos a los colores normales. HTML arroja un error. El problema que tiene eslint es que no se asegura de devolver algo de forma coherente. Debe asegurarse de que la función siempre regrese. Intente cambiar a esto:


(i) => {
      if (i.color === value) {
        return {
          ...i,
          test: [{ t: 1, y: 5 }]
        }
      } else {return i;} //this makes sure function always returns value
    }
-1
Wee little programmer 9 ago. 2020 a las 17:09