如何在 React 中发出 axios POST 请求？

Question

因此，一些上下文：用户通过文本输入提交狗名，这由“Dogue.jsx”组件控制：

import React from 'react';

class Dogue extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      id: props.id,
      nameInput: '',
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(e) {
    this.setState({
      nameInput: e.target.value,
    });
  }

  handleSubmit(e) {
    e.preventDefault();
    this.props.inputFunction(this.state.nameInput);
  }

  render() {
    console.log(this.props.id);
    return (
      <div className="dogue-container">
        <img className="img" src={this.props.dogList} />
        <br />
        <form onSubmit={this.handleSubmit} className="form">
          <input
            onChange={this.handleChange}
            className="input"
            type="text"
            placeholder="Enter dog name"
          />
          <br />
          <button className="button">Submit</button>
        </form>
        <h2 className="text">Name: {this.props.name} </h2>
      </div>
    );
  }
}

export default Dogue;

然后将提交的信息传递给“App.jsx”，用于更新状态：

import React, {Component} from 'react';
import './styles.css';
import DogList from './DogList';
import axios from 'axios';

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      loading: false,
      dog: [],
      dogName: [],
    };
    this.updateStateWithInput = this.updateStateWithInput.bind(this);
  }

  setData = async () => {
    const x = await fetch('https://dog.ceo/api/breed/hound/images');
    const y = await x.json();
    const z = await y.message;

    let newArr = [];
    for (let i = 0; i < z.length; i++) {
      if (i <= 9) {
        newArr.push(z[i]);
      }
    }
    return newArr;
  };

  async componentDidMount() {
    this.setState({
      loading: true,
    });

    let dogPromise = await this.setData();
    let dogNamePromise = await axios.get('http://localhost:3000/dogs');

    this.setState({
      loading: false,
      dog: dogPromise,
      dogName: dogNamePromise.data,
    });
  }

  updateStateWithInput(nameInput) {
    //Here is where state is updated.
    //change state, then use axios.post to submit data
  }

  render() {
    return this.state.loading ? (
      <h1 className="text"> Dogues Loading.....</h1>
    ) : (
      <div>
        <h1 className="text">Rate My Dogue</h1>
        <DogList
          dogs={this.state.dog}
          name={this.state.dogName}
          inputFunction={this.updateStateWithInput}
        />
      </div>
    );
  }
}

export default App;

我想，更新后的状态将在 axios post 请求中用于向数据库提交数据。所以，我已经将输入数据从 Dogue 发送到 App，我只是不知道现在该怎么办？当前状态信息如下：

[
  {
    id: 1,
    dogName: 'bruce',
  },
  {
    id: 2,
    dogName: 'borker',
  },
  {
    id: 3,
    dogName: 'henry',
  },
];

我还应该在 DogList.jsx 中显示我的地图功能：

import React from 'react';
import Dogue from './Dogue';

const DogList = (props) => {
  return (
    <div className="img-container">
      {props.dogs.map((doggie, index) => {
        return (
          <Dogue
            id={props.name[index] && props.name[index].id}
            key={index}
            dogList={doggie}
            name={props.name[index] && props.name[index].dogName}
            inputFunction={props.inputFunction}
          />
        );
      })}
    </div>
  );
};

export default DogList;

Answer 1

您可以通过调用 axios 发送POST 请求：

axios.post(url, data, options);

这类似于您调用 get 方法发出GET 请求的方式。

我把这个 axios 备忘单留在这里，因为它真的很有用，直到你掌握它：

https://kapeli.com/cheat_sheets/Axios.docset/Contents/Resources/Documents/index