如何使用输入文本作为数据发出 POST 请求

Question

I am new to react and I am trying to make a POST request using text field data, can anyone help me with how to store that input and make a request after a button is pressed.

I attempted to use useRef() which allowed me to obtain the data however I was not able to store it as a data object to then persist.

Currently my data persists, however it persists an empty object and the state is not being updated.

If anyone can help, I will really appreciate that.

Below is my App.js class

import React, { useState, useEffect, useRef, Component } from 'react';
import axios from "axios";

const api = axios.create({
    baseURL: "http://localhost:8080/artists"
});

class App extends Component {
    state = {
        artists: [],
        theArtistName: ""
    }

    constructor(props){
        super(props);
        this.getArtists()
    }

    //calling this method will allow artist array to be populated everytime an event occurs, e.g POST, PUT, DELETE
    getArtists = async () =>{
        let data = await api.get("/").then(({ data }) => data);
        this.setState({artists: data}) //setting our artists to be the data we fetch
    }

    createArtist = async () =>{
       let response = await api.post('/', {name: this.state.theArtistName})
        console.log(response)
        this.getArtists()
    }

    deleteArtist = async (id) =>{
        let data = await api.delete('/${id}')
        this.getArtists();
    }

    handleAddArtist = (event) =>{
        event.preventDefault()
        this.setState({
            theArtistName: event.target.value
        })
        const data = this.state.theArtistName
        console.log(data)

    }

    componentDidMount(){
        this.createArtist()

    }

    render(){
        // const {theArtistName} = this.state
        return(
            <>           
            <input type={Text} placeholder="Enter Artist Name" name="theArtistName"></input>
                <button onClick={this.createArtist}>Add Artist</button>
                    {this.state.artists.map(artist => <h4 key={artist.id}>{artist.name}
                <button onClick={() =>this.deleteArtist(artist.id)}>Delete artist</button></h4>)}
            </>
        )
        
    }

}


export default App;

Answer 1

because react update state asynchronously so when you are invoking handleAddArtist function which update state the event might be gone so you need to store the value from the event in variable like this:

handleAddArtist = (event) =>{
    event.preventDefault()
    const {value} = e.target
    this.setState({
        theArtistName: value
    })
}

and to check state update there is a lifecycle method called componentDidUpdate for class component and useEffect for functional component.

[edit]: call this.createArtist() in componentDidUpdate like this:

componentDidUpdate(prevProps,prevState){
if(prevState.theArtistName!==this.state.theArtistName)
this.createArtist()
}

so the createArtist will fire only when theArtistName state change.

Answer 2

this.setState is an async function, it takes second argument as callback. This should solve your problem. ie

import React, { useState, useEffect, useRef, Component } from "react";
import axios from "axios";

const api = axios.create({
  baseURL: "http://localhost:8080/artists",
});

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      artists: [],
      theArtistName: "",
    };
  }

  //calling this method will allow artist array to be populated everytime an event occurs, e.g POST, PUT, DELETE
  getArtists = async () => {
    let data = await api.get("/").then(({ data }) => data);
    this.setState({ artists: data }); //setting our artists to be the data we fetch
  };

  createArtist = async () => {
    let response = await api.post("/", { name: this.state.theArtistName });
    console.log(response);
    this.getArtists();
  };

  deleteArtist = async (id) => {
    let data = await api.delete("/${id}");
    this.getArtists();
  };

  handleAddArtist = (event) => {
    event.preventDefault();
    this.setState(
      {
        theArtistName: event.target.value,
      },
      () => {
        this.createArtist();
      }
    );
  };

  componentDidMount() {
    this.getArtists();
  }

  render() {
    // const {theArtistName} = this.state
    return (
      <>
        <input
          type={Text}
          placeholder="Enter Artist Name"
          name="theArtistName"
        ></input>
        <button onClick={this.handleAddArtist}>Add Artist</button>
        {this.state.artists.map((artist) => (
          <h4 key={artist.id}>
            {artist.name}
            <button onClick={() => this.deleteArtist(artist.id)}>
              Delete artist
            </button>
          </h4>
        ))}
      </>
    );
  }
}

export default App;

Let me know if it helps.

Answer 3

First of all, useRef is a hook only meant for function components and not for class components. For using Refs in class components use React.createRef() .

Usually, HTML input elements maintain their own state. The usual way to access the value of an input element from a React component that renders it is to control the input element's state via this component by adding an onChange listener and a value attribute to the input element:

class App extends Component{
    
    constructor(props) {
        super(props);
        
        this.state = {artistName: ""};
        this.handleArtistNameChange = this.handleArtistNameChange.bind(this);
    }

    handleArtistNameChange(event) {
        this.setState({artistName: event.target.value});
    }

    render(){
        return (     
            <input
                type="text"
                value={this.state.artistName}
                onChange={this.handleArtistNameChange}
            />
        );
    }
}

Whenever the value of the input element changes the App component will rerender with the most up-to-date value of the input in its state.

Here is a working example:

You can read more on using form elements in React here .