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);
}
0
Timothy 10 may. 2019 a las 16:17

3 respuestas

La mejor respuesta

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.

0
Timothy 21 may. 2019 a las 10:48
    <FormChange
      onSubmit={this.handleSubmit.bind(this)}
      password={this.state.users.password}
    />

Haz este cambio y verifica

0
Kishan Jaiswal 10 may. 2019 a las 13:20

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)}
0
Angelotti 10 may. 2019 a las 14:27