estoy iniciando misprimeros pasos con react。 Estoy programando un crud，pero tengo problemas para editar el registro。 Estoy usando react 16.13，axios para laconección，la api esta con net core 3 y la bd en sql server，la base de datos tiene las tablas relacionadas。 Estoy usando：useContext，useState，useEffect。解构的问题：const {titulo，descripcion} = proyecto;
没有任何形式的密码
[Los valores en el y y que se asignan al state state son：
proyectoActualDatos: [{…}]
0:
{descripcion: "Se lleva a cabo en", idProyecto: 15, idTipoTabla:…}
descripcion: "Se lleva a cabo en"
idProyecto: 15
idTipoTabla: 1
idTipoTablaNavigation: null
idUnidad: 1
idUnidadNavigation: null
tiProyectoUsuario: []
titulo: "Encuesta"
编辑您的信息
State {0: {…}, descripcion: "Mapa tematico 1", titulo: "M…}
0 {descripcion: "Mapa tematico", idProyecto: 17, idTi…}
idProyecto: 17
idUnidad: 1
idTipoTabla: 1
titulo: "Mapa"
descripcion: "Mapa tematico"
idTipoTablaNavigation: null
idUnidadNavigation: null
tiProyectoUsuario: []
titulo: "Mapa 1"
descripcion: "Mapa tematico 1"
Esta duplicando eltítuloydescripcióny no lo esta escribiendo sobre el mismo objeto（titulo ydescripciónse ven dobles。
¿Que esta mal en el destructuring ?, ojala me puedan ayudar，de antemano gracias。
El codigo es：
import React, { useContext, useState, useEffect } from 'react';
import proyectoContext from '../../context/proyectos/proyectoContext';
const ProyectoEditar = () => {
// Extrar si un proyecto esta activo
const proyectosContext = useContext(proyectoContext);
const { proyectoActualDatos, agregarProyecto } = proyectosContext;
// State del formulario
const [proyecto, guardarProyecto] = useState({
idProyecto: null,
idUnidad: null,
idTipoTabla: null,
titulo: '',
descripcion: '',
idTipoTablaNavigation: null,
idUnidadNavigation: null
})
// tiProyectoUsuario: []
// Effect que detecta si hay una proyecto seleccionada
useEffect(() => {
if(proyectoActualDatos !== null) {
console.log("effect");
console.log(proyectoActualDatos);
console.log(proyectoActualDatos.titulo);
guardarProyecto(proyectoActualDatos)
} else {
guardarProyecto({
idProyecto: 0,
idUnidad: 0,
idTipoTabla: 0,
titulo: '',
descripcion: '',
idTipoTablaNavigation: null,
idUnidadNavigation: null,
tiProyectoUsuario: []
})
}
}, [ proyectoActualDatos]);
// extraer datos del proyecto
const { titulo, descripcion } = proyecto;
console.log(titulo);
// Aqui esta el ERROR, UNDEFINED
// Leer los valores del formulario
const handleChange = e => {
guardarProyecto({
...proyecto,
[e.target.name]: e.target.type === 'number' ? parseInt(e.target.value) : e.target.value
})
}
const onSubmit = e => {
e.preventDefault();
// validar
// Si es edición o si es nuevo proyecto
if(proyectoActualDatos === null ) {
modificarProducto(proyecto);
} else {
agregarProyecto(proyecto);
}
// Obtener y filtrar las tareas del proyecto actual
// reiniciar el form
}
return (
<div>
<form
className="formulario-nuevo-proyecto"
onSubmit={onSubmit}
>
<input
type="number"
className="input-text"
placeholder="Nombre Tarea..."
name="idUnidad"
onChange={handleChange}
/>
<input
type="number"
className="input-text"
placeholder="Nombre Tarea..."
name="idTipoTabla"
onChange={handleChange}
/>
<input
type="text"
className="input-text"
placeholder="Nombre Tarea..."
name="titulo"
value={titulo}
onChange={handleChange}
/>
<label value="Descripcion"></label>
<input
type="text"
className="input-text"
placeholder="Descripción"
name="descripcion"
onChange={handleChange}
/>
<input
type="submit"
className="btn btn-primary btn-block"
value="Editar Proyecto"
/>
</form>
</div>
);
}
export default ProyectoEditar;
Listo，您可以在最新的处方书上获得有效证明，Gracias por suatención。
{
selectedUser ?
<form
className="formulario-nuevo-proyecto"
onSubmit={onSubmit}
>
<input
type="number"
className="input-text"
name="idUnidad"
value={selectedUser.idTipoTabla}
onChange={handleChange}
/>
<input
type="number"
className="input-text"
name="idTipoTabla"
value={selectedUser.idUnidad}
onChange={handleChange}
/>
<input
type="text"
className="input-text"
placeholder="Nombre Tarea..."
name="titulo"
value={selectedUser.titulo}
onChange={handleChange}
/>
<label value="Descripcion"></label>
<input
type="text"
className="input-text"
placeholder="Descripción"
name="descripcion"
value={selectedUser.descripcion}
onChange={handleChange}
/>
<input
type="submit"
className="btn btn-primary btn-block"
value="Editar Proyecto"
/>
</form>
:
null
}