reactjs - put 方法不适用于反应 axios api 方法

Question

我有这个 api 在我的本地主机上运行，​​使用 drf。我定义了一个用于更新对象的 put 方法。当我在后端执行此操作时，一切都会更新，但是当我在前端执行此操作时，没有任何更新，但我得到 200 OK 状态代码。我怎样才能让它工作？

这是我的反应代码：

import React, { useState, useEffect } from 'react';
import { useHistory, useParams } from 'react-router';
import axios from 'axios';


const EkoEditPage = () => {
    const [disco, setDisco] = useState("")  
    const [feederSource33kv, setFeederSource33kv] = useState("")
    const [injectionSubstation, setInjectioSubstation] = useState("")
    const [feederName, setFeederName] = useState("")
    const [band, setBand ] = useState("")
    const [status, setStatus] = useState("")

    const history = useHistory();
    const { id } = useParams();

    const loadEkoMyto = async () => {
        const { data } = await axios.get(`http://127.0.0.1:8000/main/view/${id}`);
        setDisco(data.dicso)
        setFeederSource33kv(data.feeder_source_33kv)
        setInjectioSubstation(data.injection_substation)
        setFeederName(data.feeder_name )
        setBand(data.band)
        setStatus(data.status)
    }

    const updateEkoMyto = async () => {
        let formField = new FormData()

        formField.append('disco', disco)
        formField.append('feeder_source_33kv', feederSource33kv)
        formField.append('injecttion_substation', injectionSubstation)
        formField.append('feeder_name',feederName)
        formField.append('band', band)
        formField.append('status', status)

        await axios({
            method: 'PUT',
            url: `http://127.0.0.1:8000/main/edit/${id}`,
            data: formField
        }).then(response => {
            console.log(response.data)
        })

    }


    useEffect (() => {
        loadEkoMyto()
    }, [])


    return (
       
        <div className="container">
  <div className="w-75 mx-auto shadow p-5">
    <h2 className="text-center mb-4">Update A Student</h2>
    

    <div className="form-group">
      </div>

      <div className="form-group">
        <input
          type="text"
          className="form-control form-control-lg"
          name="disco"
          value={disco}
          onChange={(e) => setDisco(e.target.value)}
        />
      </div>
     
      <div className="form-group">
        <input
          className="form-control form-control-lg"
          placeholder="Enter Your E-mail Address"
          name="feeder_source_33kv"
          value={feederSource33kv}
          onChange={(e) => setFeederSource33kv(e.target.value)}
        />
      </div>
      <div className="form-group">
        <input
          type="text"
          className="form-control form-control-lg"
          placeholder="Enter Your Phone Number"
          name="injection_substation"
          value={injectionSubstation}
          onChange={(e) => setInjectioSubstation(e.target.value)}
        />
      </div>
      <div className="form-group">
        <input
          type="text"
          className="form-control form-control-lg"
          placeholder="Enter Your address Name"
          name="address"
          value={feederName}
          onChange={(e) => setFeederName(e.target.value)}
        />
      </div>
      <div className="form-group">
        <input
          type="text"
          className="form-control form-control-lg"
          name="address"
          value={band}
          onChange={(e) => setBand(e.target.value)}
        />
      </div>
      <select name="status" onChange={(e) => setStatus(e.target.value)}> 
        <option value={status}>Yes</option>
        <option value={status}>No</option>
      </select>
      <button className="btn btn-primary btn-block" onClick={updateEkoMyto}>Update Eko</button>
   
  </div>
</div>
 
    );
    
};

export default EkoEditPage;















 }

标签： reactjsdjango-rest-frameworkaxios