reactjs - 如何在 React 中发出 axios POST 请求?
问题描述
因此,一些上下文:用户通过文本输入提交狗名,这由“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;
解决方案
POST
你可以通过调用 axios发送请求:
axios.post(url, data, options);
它类似于您调用 get 方法发出GET
请求的方式。
我把这个 axios 备忘单留在这里,因为它真的很有用,直到你掌握了它:
https://kapeli.com/cheat_sheets/Axios.docset/Contents/Resources/Documents/index
推荐阅读
- python-3.x - Python - 满足条件时未发送电子邮件
- c - 不可理解的指针错误
- google-apps-script - 使用 FormResponse.getEditResponseUrl 时无法编辑响应错误
- system-verilog - 将模块作为类型传递
- python - 计算具有特定值的元素在不同列中的出现次数
- google-sheets - 如何从 ImportXML 函数永久更新值
- javascript - 来自匿名函数的错误:意外令牌 <
- django - Django:如何有条件地过滤外键
- c# - 生成立方体球体
- python - 值为 2 的 int() 的 ValueError 无效文字:Python 中的 ''