Javascript 使用Axios请求在前端执行PUT请求不工作

我正在关注一个在线MERN练习跟踪器的示例项目。后端完全工作，所有crud操作都成功工作。编辑或更新数据时，前端反应部分不工作。基本上，我更新数据的唯一方法就是使用邮递员。我尝试过配置所有东西，据我所知，Axios请求工作不正常

我已附上所有与编辑或更新功能相关的代码

-----要快速导航到相关部分，请查看第一段代码的练习组件。第二种方法是组件DIDMOUNT和ONSUBMIT方法----------

import React，{Component}来自'React'；
从'react router dom'导入{Link}；
从“axios”导入axios；
常量练习=道具=>(
{props.exercise.username}
{props.exercise.description}
{props.exercise.duration}
{props.exercise.date.substring（0,10）}
编辑|
)
导出默认类exerciseList扩展组件{
建造师（道具）{
超级（道具）；
this.deleteExecute=this.deleteExecute.bind（this）
this.state={练习：[]}；
}
componentDidMount（）{
axios.get（）http://localhost:5000/exercises/')
。然后（响应=>{
this.setState（{exercises:response.data}）
})
.catch（（错误）=>{
console.log（错误）；
})
}
删除练习（id）{
axios.delete（'http://localhost:5000/exercises/“+id）
.then（response=>{console.log（response.data）}）；
这是我的国家({
练习：this.state.exercises.filter（el=>el.\u id！==id）
})
}
练习表（）{
返回此.state.exercises.map（currentexercise=>{
返回；
})
}
render（）{
返回(
记录的练习
用户名
描述
期间
日期
行动
{this.exerciseList（）}
)
}
}

import React，{Component}来自'React'；
从“axios”导入axios；
从“react DatePicker”导入日期选择器；
导入“react datepicker/dist/react datepicker.css”；
导出默认类扩展组件{
建造师（道具）{
超级（道具）；
this.onChangeUsername=this.onChangeUsername.bind（this）；
this.onchangescription=this.onchangescription.bind（this）；
this.onChangeDuration=this.onChangeDuration.bind（this）；
this.onChangeDate=this.onChangeDate.bind（this）；
this.onSubmit=this.onSubmit.bind（this）；
此.state={
用户名：“”，
说明：“”，
持续时间：0，
日期：新日期（），
用户：[]
}
}
componentDidMount（）{
axios.get（）http://localhost:5000/exercises/“+this.props.match.params.id）
。然后（响应=>{
这是我的国家({
用户名：response.data.username，
描述：response.data.description，
持续时间：response.data.duration，
日期：新日期（response.data.date）
})   
})
.catch（函数（错误）{
console.log（错误）；
})
axios.get（）http://localhost:5000/users/')
。然后（响应=>{
如果（response.data.length>0）{
这是我的国家({
用户：response.data.map（user=>user.username），
})
}
})
.catch（（错误）=>{
console.log（错误）；
})
}
onChangeUsername（e）{
这是我的国家({
用户名：e.target.value
})
}
更改说明（e）{
这是我的国家({
描述：e.target.value
})
}
变更持续时间（e）{
这是我的国家({
持续时间：e.target.value
})
}
更改日期（日期）{
这是我的国家({
日期：日期
})
}
提交（e）{
e、 预防默认值（）；
常量练习={
用户名：this.state.username，
description:this.state.description，
持续时间：this.state.duration，
日期：this.state.date
}
控制台日志（练习）；
轴心柱http://localhost:5000/exercises/update/“+this.props.match.params.id，练习）
。然后（res=>console.log（res.data））；
window.location='/'；
}
render（）{
返回(
编辑练习日志
用户名：
{
this.state.users.map（函数（用户）{
返回{user}
;
})
}
说明：
持续时间（分钟）：
日期：
)
}
}

shawnyates，澄清了一些事情，这也是我曾经想到的，然而，当我在线查看文档时，axios.post也被用来更新数据

通过更改，系统现在已成功运行

axios.put('http://localhost:5000/exercises/update/' + this.props.match.params.id, exercise)
      .then(res => console.log(res.data));

---

什么要求？你想干什么？您要将PUT请求发送到哪里？这里没有问题。当我运行前端和后端时，它会显示一个编辑链接来编辑持续时间、描述和日期，当我编辑它并点击提交时，它不会更新。我应该包括整个代码吗？或者GitHub repo？

axios.post

发送post请求，但是由于您正在更新数据，您的后端路由处理程序可能需要PUT请求？如果您的后端需要PUT，那么从客户端发送POST将不起作用。我可能会将该调用放在Saga->Service层中的后端，并通过一个Reducer获取结果。但这可能不是重点，我只是想指出。

import React, { Component } from 'react';
import axios from 'axios';
import DatePicker from 'react-datepicker';
import "react-datepicker/dist/react-datepicker.css";

export default class EditExercise extends Component {
  constructor(props) {
    super(props);

    this.onChangeUsername = this.onChangeUsername.bind(this);
    this.onChangeDescription = this.onChangeDescription.bind(this);
    this.onChangeDuration = this.onChangeDuration.bind(this);
    this.onChangeDate = this.onChangeDate.bind(this);
    this.onSubmit = this.onSubmit.bind(this);

    this.state = {
      username: '',
      description: '',
      duration: 0,
      date: new Date(),
      users: []
    }
  }

  componentDidMount() {
    axios.get('http://localhost:5000/exercises/'+this.props.match.params.id)
      .then(response => {
        this.setState({
          username: response.data.username,
          description: response.data.description,
          duration: response.data.duration,
          date: new Date(response.data.date)
        })   
      })
      .catch(function (error) {
        console.log(error);
      })

    axios.get('http://localhost:5000/users/')
      .then(response => {
        if (response.data.length > 0) {
          this.setState({
            users: response.data.map(user => user.username),
          })
        }
      })
      .catch((error) => {
        console.log(error);
      })

  }

  onChangeUsername(e) {
    this.setState({
      username: e.target.value
    })
  }

  onChangeDescription(e) {
    this.setState({
      description: e.target.value
    })
  }

  onChangeDuration(e) {
    this.setState({
      duration: e.target.value
    })
  }

  onChangeDate(date) {
    this.setState({
      date: date
    })
  }

  onSubmit(e) {
    e.preventDefault();

    const exercise = {
      username: this.state.username,
      description: this.state.description,
      duration: this.state.duration,
      date: this.state.date
    }

    console.log(exercise);

    axios.post('http://localhost:5000/exercises/update/' + this.props.match.params.id, exercise)
      .then(res => console.log(res.data));

    window.location = '/';
  }

  render() {
    return (
    <div>
      <h3>Edit Exercise Log</h3>
      <form onSubmit={this.onSubmit}>
        <div className="form-group"> 
          <label>Username: </label>
          <select ref="userInput"
              required
              className="form-control"
              value={this.state.username}
              onChange={this.onChangeUsername}>
              {
                this.state.users.map(function(user) {
                  return <option 
                    key={user}
                    value={user}>{user}
                    </option>;
                })
              }
          </select>
        </div>
        <div className="form-group"> 
          <label>Description: </label>
          <input  type="text"
              required
              className="form-control"
              value={this.state.description}
              onChange={this.onChangeDescription}
              />
        </div>
        <div className="form-group">
          <label>Duration (in minutes): </label>
          <input 
              type="text" 
              className="form-control"
              value={this.state.duration}
              onChange={this.onChangeDuration}
              />
        </div>
        <div className="form-group">
          <label>Date: </label>
          <div>
            <DatePicker
              selected={this.state.date}
              onChange={this.onChangeDate}
            />
          </div>
        </div>

        <div className="form-group">
          <input type="submit" value="Edit Exercise Log" className="btn btn-primary" />
        </div>
      </form>
    </div>
    )
  }
}

axios.put('http://localhost:5000/exercises/update/' + this.props.match.params.id, exercise)
      .then(res => console.log(res.data));