por favor, estoy tratando de establecer dinámicamente el objeto de matriz en el campo de entrada y enviarlo al backend. Gracias
cuando i console.log printOut, vuelve sin definir. hola a todos, estoy tratando de establecer dinámicamente el objeto de matriz en el campo de entrada y enviarlo al backend. Gracias
hola a todos, estoy tratando de establecer dinámicamente el objeto de matriz en el campo de entrada y enviarlo al backend. Gracias
const myArr= [ {product: 'egg', price: 5, id:1}, {product: 'cake', price: 3, id:2} ] const [input, setInput] = useState(myArr) const changeHandler = (id) => event => { const { name, value } = event.target; setInput(input => input.map((el) => el.id === id ? { ...el, [name]: value, } : el, )); }; const submitForm = (e) =>{ e.preventDefault(); let printOut = input console.log({print:printOut}); try { axios.post('/products/print', printOut) } catch (error) { console.log(error); } } return ( <form onSubmit={submitForm}> {myArr.map(x=>( <div key={x.id}> <input name='product' value= {x.product} onChange={(e) =>changeHandler(x.id)(e)} /> <input name='price' value= {x.price} onChange={(e)=> changeHandler(x.id)(e)} /> </div> ))} <input type="submit" value="Submit" /> </form> )Como discutimos en el chat, hubo muchos problemas.
onChange={(e) => changeHander(x.id)(e) } . Su changeHandler devuelve una función. Creo que se llama currying pero es una función que devuelve otra función.setInput(input => input.map((el) => el.id === id? {...el, [name]: value,} : el,)); también está mal input.map nunca funcionará ya que ha establecido el estado inicial para eso como []. Ahora no sé qué necesitará, pero actualice el estado inicial a myArray o cambie el mapeo setState a myArray como setInput(input => myArray.map((el) => el.id === id? { ...el, [name]: value,} : el,));