import React from 'react'; import { makeStyles} from '@material-ui/core/styles'; import {Select, MenuItem} from '@material-ui/core'; import useState from 'react'; const test = () => { const data = [ {TITLE : "Festival", PRIORITY : 3, STEP : 1}, {TITLE : "Headphone", PRIORITY : 2, STEP : 2}, {TITLE : "Mountain", PRIORITY : 1, STEP : 1} ] return ( <> { data.map((info) => ( <div> <div>{info.TITLE}</div> <Select value={info.PRIORITY}> <MenuItem value={1}> 1 </MenuItem> <MenuItem value={2}> 2 </MenuItem> <MenuItem value={3}> 3 </MenuItem> </Select> <Select value={info.STEP}> <MenuItem value={1}> 1 </MenuItem> <MenuItem value={2}> 2 </MenuItem> <MenuItem value={3}> 3 </MenuItem> </Select> </div> )) } </> )} export default test;
En este código, estoy tratando de controlar el valor de PRIORIDAD y el valor de PASO respectivamente.
Tengo problemas porque, en mi matriz de datos, tengo tres elementos. Por lo tanto, si añado
const [priority, setPriority] = useState(undefined); const [step, setStep] = useState(undefined); const priorityChange = (e) => { setPriority(e.target.value) }; const stepChange = (e) => { setStep(e.target.value) };
y poner este valor en
<Select value={priority} onChange={priorityChange}></Select> ... <Select value={step} onChange={stepChange}></Select> ...
éste ítem,
Cada elemento obtiene el mismo valor, por lo tanto, no puedo controlar cada valor de PRIORIDAD y PASO.
¿Cómo puedo controlar cada artículo? Necesito algo de ayuda.
Podría escribir mal. ¡Por favor sea comprensible!
En primer lugar, su matriz data
no está vinculada a ninguna variable de gestión de estado. Entonces, cuando intenta mostrar los valores inicialmente desde la matriz de datos y luego intenta mostrar los datos actualizados de la variable de ganchos cuando se activa una acción, es obvio que causa algún conflicto y, por lo tanto, no muestra los valores actualizados. Una forma de evitar esto sería asociar los datos iniciales con un enlace de estado y luego actualizar la matriz data
consecuencia. También es importante que se actualicen los datos correctos que correspondan a la acción desencadenada, por lo que aquí nos gustaría asegurarnos de que cada objeto de la colección sea único, esto podría lograrse asignando un atributo de id
en cada objeto. Más arriba, podemos encontrar el objeto en el que se realizó la acción, mutar el valor de la propiedad y luego reconstruir la matriz usando la función de gancho de estado para volver a renderizar con los valores actualizados correctos. Consulte el código a continuación y lea los comentarios para tener una idea más clara.
import React, { useState } from "react"; const App = () => { const [data, setData] = useState([ { id: Math.random(), TITLE: "Festival", PRIORITY: 3, STEP: 1 }, { id: Math.random(), TITLE: "Headphone", PRIORITY: 2, STEP: 2 }, { id: Math.random(), TITLE: "Mountain", PRIORITY: 1, STEP: 1 } ]); //id attribute is added to each object to make sure every object in the array is unique. const priorityChange = (e, id) => { //This function should accept event and id arguments, to identify and update //values correctly. const index = data.findIndex((item) => item.id === id); //find the index of the object (item) whose priority needs to be updated. const arr = [...data]; //Copy original array data to constant arr. arr[index].PRIORITY = e.target.value; //mutate the PRIORITY property's value setData([...arr]); //Set data to the new array with updated value. }; const valueChange = (e,id) => { //This function should accept event and id arguments, to identify and update //values correctly. const index = data.findIndex((item) => item.id === id); //find the index of the object (item) whose priority needs to be updated. const arr = [...data]; arr[index].STEP = e.target.value; //mutate the STEP property's value setData([...arr]); //Set data to the new array with updated value. }; return ( <> {data.map((info) => ( <div key={Math.random()}> <div>{info.TITLE}</div> <select value={info.PRIORITY} onChange={(e) => { priorityChange(e, info.id); //pass event object and id corresponding to each array object. }} > <option value={1}> 1 </option> <option value={2}> 2 </option> <option value={3}> 3 </option> </select> <select value={info.STEP} onChange={(e) => { valueChange(e, info.id); //pass event object and id corresponding to each array object. }} > <option value={1}> 1 </option> <option value={2}> 2 </option> <option value={3}> 3 </option> </select> </div> ))} </> ); }; export default App;