Estoy tratando de crear una página de cambio de contraseña en reaccionar y obtengo typeError: no puedo leer la propiedad 'usuarios' de nulo. El código funciona para otras páginas de formulario (donde estoy haciendo PUT and CREATE) pero no esta
Intenté vincular el controlador de envío a esta palabra clave, pero eso no funcionó. También intenté vincular el handlePasswordChange a esta palabra clave
./formchange
import React from "react";
import { Link } from "react-router-dom";
var createReactClass = require("create-react-class");
var FormChange = createReactClass({
//setting initial state
getInitialState() {
return {
password: {}
};
},
handlePasswordChange(e) {
this.setState({
password: e.target.value
});
},
handleSubmit(e) {
e.preventDefault();
this.props.onSubmit(this.state);
this.props.history.push("/");
},
render() {
return (
<form
name="categories_post"
className="form-horizontal"
onSubmit={this.handleSubmit}
>
<div id="change_password">
<div className="form-group">
<label
className="col-sm-2 control-label required"
htmlFor="password"
>
Password
</label>
<div className="col-sm-10">
<input
type="text"
value={this.state.password}
onChange={this.handlePasswordChange}
id="password"
className="form-control"
/>
</div>
</div>
<button
type="submit"
id="formChangeSubmit"
className="btn btn-default"
>
Submit
</button>
</div>
</form>
);
}
});
export default FormChange;
./passwordupdate
import React from "react";
import { updateUsers, fetchUsers } from "./actions/appactions";
import FormChange from "./formchange";
var createReactClass = require("create-react-class");
const Update = createReactClass({
getIntitialState() {
return {
users: {}
};
},
componentWillReceiveProps(props) {
this.setState(props);
},
componentDidMount() {
fetchUsers(this.props.match.params.usersId)
.then(data => {
this.setState(state => {
state.users = data;
return state;
});
})
.catch(err => {
console.error("error", err);
});
},
handleSubmit(data) {
updateUsers(this.state.users.id, data);
},
render() {
return (
<div>
<FormChange
onSubmit={this.handleSubmit.bind}
password={this.state.users.password}
/>
</div>
);
}
});
export default Update;
//fetchusers function
export function fetchUsers(id) {
return fetch("https://localhost:44341/api/users/" + id, {
method: "GET",
mode: "cors"
})
.then(res => res.json())
.catch(err => err);
}
3 respuestas
El problema estaba en ComponentDidMount()
. El estado siempre fue nulo, tuvo que cambiarlo a esto
componentDidMount() {
fetchTheUsers(this.props.match.params.usersId)
.then(data => {
this.setState({
users: data
});
})
Inicialmente lo hice así porque así fue como funcionó para mis otros archivos de actualización. Espero que esto sea útil para alguien más.
<FormChange
onSubmit={this.handleSubmit.bind(this)}
password={this.state.users.password}
/>
Haz este cambio y verifica
No estoy seguro, pero tiene datos en handleSubmit como parámetro, pero no los pasa.
Probar esto
Puede llamar a la función de esta manera:
handleSubmit=(data)=> {
updateUsers(this.state.users.id, data);
},
Y llámalo
onSubmit={(data)=> this.handleSubmit(data)}
Preguntas relacionadas
Nuevas preguntas
reactjs
React es una biblioteca de JavaScript para crear interfaces de usuario. Utiliza un paradigma declarativo basado en componentes y tiene como objetivo ser eficiente y flexible.