Quiero pasar un estado a una solicitud de publicación de axios, para que los datos del estado entren en mi backend. Pero recibo un error que me dice que el estado que elegí no está definido.
Esto es lo que tengo:
interfaz de reacción
import React, { Component } from "react"; import Axios from "axios"; class Gluecksrad extends Component { constructor(props) { super(props); this.state = { spieler: "", }; } submitName() { const body = { spieler: this.state.spieler }; Axios.post("http://localhost:3001/api/insert", body).then(() => { console.log(this.state.spieler); alert("successful insert"); }); } render() { return ( <React.Fragment> <h1>Glücksrad</h1> <label htmlFor="name">Name</label> <input id="name" type="text" onChange={(e) => { this.setState({ spieler: e.target.value }); console.log(this.state.spieler); }} ></input> <button onClick={this.submitName}>Name Absenden</button> </React.Fragment> ); } } export default Gluecksrad;Back-end del nodo
app.use(express.json()); app.use(cors()); app.use(bodyParser.urlencoded({ extended: true })); app.post("/api/insert", (req, res) => { const spieler = req.body.spieler; const sqlInsert = "INSERT INTO spiele (spieler) VALUES (?)"; db.query(sqlInsert, spieler, (err, result) => { console.log(result); }); });aquí está el resultado
En su función submitName , está creando el cuerpo de la solicitud de axios utilizando un spieler variable, pero no se ha definido previamente. Debe hacer uso de spieler del estado de la siguiente manera:
submitName() { const body = { spieler: this.state.spieler }; Axios.post("http://localhost:3001/api/insert", body).then(() => { console.log(this.state.spieler); alert("successful insert"); }); } Con respecto a su segundo problema de que this.state no está undefined , esto se debe al hecho de que, de manera predeterminada, no puede acceder al contexto circundante representado por this palabra clave cuando usa funciones regulares porque tienen su propio contexto. Dado que de hecho está utilizando una función regular submitName() , debe vincularla para acceder al contexto de this clase circundante. Alternativamente, puede utilizar una función de flecha submitName = () => {} que no necesita vinculación ya que conserva el contexto circundante. Creé este codesandbox para usted que muestra las dos opciones válidas, así como el enfoque incorrecto. Cuidado con el console.log(this) . Registra la clase Gluecksrad para la función de flecha o la función normal con this enlace, mientras que registra undefined cuando se envía sin this enlace. Acceder a la propiedad de state sin que this esté undefined en el último enfoque es la raíz del error. Puede leer más sobre el motivo de this enlace en este artículo .
Debe vincular su método submitName agregando esta línea a su constructor. puede obtener más información sobre los formularios de reacción en los documentos oficiales aquí
this.submitName = this.submitName.bind(this);su constructor debería verse así:
constructor(props) { super(props); this.state = { spieler: "", }; this.submitName = this.submitName.bind(this); }No está accediendo a los bienes inmuebles. reemplazar
{ spieler: spieler, }con
{ spieler: this.state.spieler, }