我的应用程序中有一个优惠添加功能。我的前端是 react js，后端是 Laravel。我创建了一条更新数据的路线并使用 Axios 调用它，但我不知道我做错了什么。任何类型的帮助将不胜感激谢谢！
这是我在 api.php 中的路线
Route::put('offers/{id}', 'Api\Offer\OfferController@update');
这是我的优惠控制器
public function update(Request $request, $id)
{
$offer = Offer::findOrFail($id);
$offer->update($request->all());
return $offer;
}
这是我用于更新的 API 调用函数
export const updateItem = (offertitle,offerdescription,vid,id) => {
return axios
.put(
`/api/offers/${id}`,
{
offertitle:offertitle,
offerdescription:offerdescription,
vid:vid
},
{
headers: { 'Content-Type': 'application/json' }
}
)
.then(function (response) {
console.log(response)
})
}
报价组件
export default class Offer extends React.Component{
constructor() {
super()
this.state = {
offertitle: '',
offerdescription: '',
editDisabled: false,
offers: [],
redirect: false,
vid:'',
offerid:''
}
this.onSubmit = this.onSubmit.bind(this)
this.onChange = this.onChange.bind(this)
}
componentDidMount() {
this.getAll()
if (sessionStorage.getItem('user')) {
vendorprofile().then(res => {
this.setState({
vid: res.user.vid
})
})
}
else {
this.setState({ redirect: true });
}
}
onChange = e => {
this.setState({
[e.target.name]: e.target.value
})
}
getAll = () => {
getList().then(data => {
this.setState(
{
offertitle:'',
offerdescription:'',
offers: [...data]
},
() => {
console.log(this.state.offers)
}
)
})
}
onSubmit = e => {
e.preventDefault()
addItem({offertitle: this.state.offertitle, offerdescription: this.state.offerdescription,vid: this.state.vid}).then(() => {
this.getAll()
})
this.setState({
offertitle: '',
offerdescription:'',
vid:''
})
}
onUpdate = e => {
e.preventDefault()
updateItem({ offertitle: this.state.offertitle, offerdescription: this.state.offerdescription, offerid: this.state.offerid, vid: this.state.vid }).then(() => {
this.getAll()
})
this.setState({
offertitle: '',
offerdescription: '',
vid:'',
editDisabled: ''
})
this.getAll()
}
onEdit = (offerid, e) => {
e.preventDefault()
var data = [...this.state.offers]
data.forEach((offers,index) => {
if (offers.offerid === offerid) {
this.setState({
offerid: offers.offerid,
offertitle: offers.offertitle,
offerdescription: offers.offerdescription,
editDisabled: true
})
}
})
}
onDelete = (val, e) => {
e.preventDefault()
deleteItem(val)
var data = [...this.state.offers]
data.filter(function (offers, index) {
if (offers.offerid === val) {
data.splice(index, 1)
}
return true
})
this.setState({ offers: [...data] })
}
render() {
if (this.state.redirect) {
return (
<Redirect to="/stsignin" />
)
}
return (
<div>
<Pane />
<div className="container" style={{ marginTop : 150}}>
<form>
<div className="form-group">
<div className="row">
<div className="col-md-12">
<label>OFFER TITLE</label>
<input
type="text"
className="form-control"
id="offertitle"
name="offertitle"
value={this.state.offertitle || ''}
onChange={this.onChange.bind(this)}
/>
<label>OFFER DESCRIPTION</label>
<input
type="text"
className="form-control"
id="offerdescription"
name="offerdescription"
value={this.state.offerdescription || ''}
onChange={this.onChange.bind(this)}
/>
</div>
</div>
</div>
{!this.state.editDisabled ? (
<button
type="submit"
onClick={this.onSubmit.bind(this)}
className="btn btn-success btn-block"
>
Submit
</button>
) : (
''
)}
{this.state.editDisabled ? (
<button
type="submit"
onClick={this.onUpdate.bind(this)}
className="btn btn-primary btn-block"
>
Update
</button>
) : (
''
)}
</form>
<table className="table">
<tbody>
<tr>
<th>OFFER_TITLE</th>
<th>OFFER_DESCRIPTION</th>
</tr>
{this.state.offers.map((offers,index) => (
<tr key={index}>
<td className="text-left">{offers.offertitle}</td>
<td className="text-left">{offers.offerdescription}</td>
<td className="text-right">
<button
href=""
className="btn btn-info mr-1"
disabled={this.state.editDisabled}
onClick={this.onEdit.bind(
this,
offers.offerid
)}
>
Edit
</button>
<button
href=""
className="btn btn-danger"
disabled={this.state.editDisabled}
onClick={this.onDelete.bind(
this,
offers.offerid
)}
>
Delete
</button>
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
)
}
}```