que funcione 🙂 es que me hago un lío | midudev - Aprende y Mejora en Programación JavaScript | Page 1

steel hedge Jul 11, 2022, 1:13 PM

#

mira, esto es lo que hay hasta ahora. Esto es una parte de un proyecto, así que yo sólo colaboro y me pidieron trabajar esta parte. Gran parte de ello estaba así como lo ves:

#

`import React from "react";
import { IOwnerProfileForm } from "../../../models";
import { FormEvent } from "../../../types";

// OwnerProfile
const dataOwner: IOwnerProfileForm[] = [
{
id: 1,
label: "Name",
name: "name",
placeholder: "Name",
},
{
id: 2,
label: "Vorname",
name: "vorname",
placeholder: "Vorname",
},
{
id: 3,
label: "Straße",
name: "straße",
placeholder: "Straße",
},
{
id: 4,
label: "Hausnummer",
name: "hausnummer",
placeholder: "Hausnummer",
},
{
id: 5,
label: "Stadt",
name: "stadt",
placeholder: "Stadt",
},
{
id: 6,
label: "Land",
name: "land",
placeholder: "Land",
},
{
id: 7,
label: "Telefonnummer",
name: "telefonnummer",
placeholder: "Telefonummer",
},
{
id: 8,
label: "XX",
name: "xx",
placeholder: "XX",
},
];
interface InputProps {
type: string;
// name?: string;
// value?: any;
// placeholder?: string | undefined;
// label?: string | undefined | any;
key: string | undefined;
}`

#

`const sendForm = async (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();

const { type } = event.target as typeof event.target & {
type: { value: string };
};

console.log("=>", type.value);
/*
await fetch("/route", {
headers: {
"Content-Type": "application/json",
},
method: "POST",
body: JSON.stringify({
type: type.value,
}),
});
*/
};

  <form className='containerForm' key={key} onSubmit={sendForm}>
    {dataOwner.map((item: any) => (
      <div className='divInputs'>
        <input
          type={type}
          className='inputs'
          key={item}
          placeholder={item.placeholder}
          name={item.name}
        />
      </div>
    ))}

    <div className='buttonContainer'>
      <button type='submit'>Änderungen Speichern</button>
    </div>
  </form>
</div>

);
}
OwnerProfile.defaultPrope = {
type: "text",
// name: "",
// value: undefined,
// placeholder: undefined,
// label: undefined
} as InputProps;
// Export area
export default OwnerProfile;`

olive solstice Jul 11, 2022, 10:18 PM

#

Primero te sugiero evitar utilizar any, le quita la ventaja que trae TS, ahí te dejo dejo la línea de código:

{dataOwner.map((item: IOwnerProfileForm) => (

Aunque si mal no me equivoco, puedes no tipar el item ya que typescript debería poder inferir el tipo de dataOwner a menos que el proyecto esté configurado para tiparlo explícitamente.

Segundo, qué necesitas exactamente? Estoy viendo que tienes una función que se encarga de enviar los datos del formulario, pero la petición comentada en vez de mandar los datos solo manda el dato de una propiedad. Necesitas recoger los datos del formulario y mandar los datos con la petición o tienes otras consultas?

olive solstice Jul 11, 2022, 10:39 PM

#

Igual ahí te dejo una posible solución para recoger los datos del form, solo falta la parte de realizar la petición

const sendForm = async (event: React.FormEvent<HTMLFormElement>) => {
  event.preventDefault();

  const formData = new FormData(event.target as HTMLFormElement);
  const data: Record<string, string> = {};
  for (let [key, value] of formData.entries()) {
    data[key] = value;
  }
  
  console.log(data)
};

placid hamlet Jul 12, 2022, 12:34 AM

#

complementando lo que compartió Vanzuh, en vez del ciclo puedes hacer
const data = Object.fromEntries(formData.entries())

steel hedge Jul 12, 2022, 9:24 AM

#

hey, muchas gracias. No había vuestros comentarios antes. Voy a probar lo que decís y les cuento

steel hedge Jul 12, 2022, 9:46 AM

#

bueno, funciona. En la opción de Vanzuh me dio problemas con el loop, pero con lo que escribió Hidden_n va todo bien.

steel hedge Jul 12, 2022, 9:48 AM

#

olive solstice Primero te sugiero evitar utilizar any, le quita la ventaja que trae TS, ahí te ...

ya, ahora que estoy leyendo de typescript he visto en todos lados que no es recomendable usar any 🙂
Pero con lo que mencionas me salta el siguiente error:
`ERROR in src/components/Administration/OwnerProfile/CommercialOwnerProfil.tsx:97:15
TS2322: Type 'IOwnerProfileForm' is not assignable to type 'Key | null | undefined'.
95 | type={type}
96 | className='inputs'

97 | key={item}
| ^^^
98 | placeholder={item.placeholder}
99 | name={item.name}
100 | />`

steel hedge Jul 12, 2022, 11:10 AM

#

now I tried to send the info:
`function OwnerProfile({ type, key }: InputProps) {
const [myData, setMyData] = useState({});

const sendForm = async (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();

const formData = new FormData(event.target as HTMLFormElement);
const data = Object.fromEntries(formData.entries());
setMyData(data);

await fetch("/registeruser", {
  headers: {
    "Content-Type": "application/json",
  },
  method: "POST",
  body: JSON.stringify({
    type: data,
  }),
})
  .then((res) => res.json())
  .then((res) => console.log("res", res));

};

/* console.log("myData", myData); */

return (
<div className='generalContainer'>
<p className='title'>Mein Profil</p>

  <form className='containerForm' key={key} onSubmit={sendForm}>
    {dataOwner.map((item: any) => (
      <div className='divInputs'>
        <input
          type={type}
          className='inputs'
          key={item}
          placeholder={item.placeholder}
          name={item.name}
        />
      </div>
    ))}

    <div className='buttonContainer'>
      <button type='submit'>Änderungen Speichern</button>
    </div>
  </form>
</div>

);
}`

olive solstice Jul 12, 2022, 4:40 PM

#

steel hedge ya, ahora que estoy leyendo de typescript he visto en todos lados que no es reco...

Quizás quieras mandar el ID como key en vez del objeto completo.

steel hedge Jul 12, 2022, 9:34 PM

#

si... es que no entiendo cómo pasar los datos que obtengo al componente. Voy a revisar eso ahora

olive solstice Jul 12, 2022, 10:16 PM

#

Me refiero a:

key={item.id}

#

El error que te marca dice que no puedes pasar un objeto a key, key está esperando un tipo Key, indefinido o nulo

#

No estoy seguro que tipo será Key, me imagino que string o number.

olive solstice Jul 12, 2022, 10:19 PM

#

olive solstice Me refiero a: ```ts key={item.id} ```

Entonces con pasar el id del item, que es un número, debería funcionar sin problemas

#

Y un consejo, si no sabes exactamente el tipo de algo, como puede ser Key, puedes utilizar la funcionalidad que te podría dar el editor de ir a la defínición, ahí puedes ver de que está conformado Key o el tipo que estás revisando.

#que funcione 🙂 es que me hago un lío