如何使用輸入文本作為數據發出 POST 請求

Question

我是新手，我正在嘗試使用文本字段數據發出 POST 請求，任何人都可以幫助我如何存儲該輸入並在按下按鈕后發出請求。

我嘗試使用useRef()來獲取數據，但是我無法將其存儲為數據 object 然后持續存在。

目前我的數據仍然存在，但是它仍然存在一個空的 object 並且 state 沒有被更新。

如果有人可以提供幫助，我將不勝感激。

下面是我的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

因為反應更新 state 是異步的，所以當你調用handleAddArtist function 更新 state 事件可能會消失，所以你需要存儲變量中的值：

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

並檢查 state 更新有一個生命周期方法componentDidUpdate用於 class 組件和useEffect用於功能組件。

[編輯]：在componentDidUpdate中調用this.createArtist() ，如下所示：

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

所以createArtist只會在theArtistName state 改變時觸發。

Answer 2

this.setState是一個異步 function，它需要第二個參數作為回調。 這應該可以解決您的問題。 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;

讓我知道它是否有幫助。

Answer 3

首先， useRef是一個鈎子，僅適用於 function 組件，不適用於 class 組件。 要在 class 組件中使用 Refs，請使用React.createRef() 。

通常，HTML 輸入元素維護自己的 state。 從渲染它的 React 組件訪問輸入元素的值的常用方法是通過向輸入元素添加onChange偵聽器和value屬性來通過此組件控制輸入元素的 state：

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}
            />
        );
    }
}

每當輸入元素的值發生更改時， App組件將使用其 state 中的最新輸入值重新呈現。

這是一個工作示例：

您可以在此處閱讀有關在 React 中使用表單元素的更多信息。