реализовать запрос HttpPut в reactjs, используя axios - PullRequest
0 голосов
/ 04 мая 2020

Я пытаюсь обновить детали пользователя, но я не совсем понимаю, как использовать запрос put во внешнем интерфейсе. Я создаю одно веб-приложение, вот мой код, может ли кто-нибудь помочь мне с этим

  import React from 'react';
    import axios from 'axios';
    export default class UpdateUser extends React.Component {

        constructor(props) {
        super(props);

        this.state = {
          id: "",
          fullName: "",
          Email: "",
          Phonenumber: "",
          service: { service: "options" },
          Description: "",
            show : false
        };

    }    
    componentDidMount() {
        const userId = +this.props.match.params.id;
        if(userId) {
            this.findUserById(userId);
        }
    }

    findUserById = (userId) => {
        axios.get("https://localhost:44338/api/publicInfo/"+userId)
            .then(response => {
                if(response.data != null) {
                    this.setState({
                      id:response.data.id,
                      fullName:response.data.fullName,
                      Phonenumber:response.data.Phonenumber,
                      service:response.data.service,
                      Description:response.data.Description,
                    });
                }
            }).catch((error) => {
                console.error("Error - "+error);
            });
    };

    updateUser = event => {
        event.preventDefault();

        const user = {
          id:this.state.id,
            fullName:this.state.fullName,
            Phonenumber:this.state.Phonenumber,
            service:this.state.service,
            Description:this.state.Description,
        };

        axios.put("https://localhost:44338/api/publicInfo/", user)
            .then(response => {
                if(response.data != null) {
                  this.props.history.push("/admin");
                } else {
                    this.setState({"show":false});
                }
            });
    };

    userChange = event => {
        this.setState({
            [event.target.name]:event.target.value
        });
    };


    render() {
        const {fullName, Email, Phonenumber,service, Description} = this.state;

        return (
          <div>
          <h3>

            {<strong>Edit User Information</strong>}

          </h3>
          <div className="pwrapper">
            <div className="form_wrapper">
              <h1 className="feedTitle">
                {"Update user details "}

              </h1>
              <form>
                <div className="fullName">
                  <lable htmlFor="fullName">Full Name</lable>
                  <input
                    placeholder="fullName"
                    type="text"
                    name="fullName"
                    value={fullName}
                    onChange={this.userChange}
                    noValidate
                  />
                </div>

                <div className="email">
                  <lable htmlFor="email">Email</lable>
                  <input
                    placeholder="example.someone@gmail.com"
                    type="email"
                    name="email"
                    value={Email}
                    onChange={this.userChange}
                    noValidate
                  />
                </div>
                <div className="Phonenumber">
                  <label htmlFor="Phonenumber">Phone Number</label>
                  <input
                    type="text"
                    placeholder="XXX-XXX-XXXX"
                    className="form-control"
                    name="userName"
                    value={Phonenumber}
                    onChange={this.userChange}
                  />
                </div>

                <div className="services">
                  <label htmlFor="service">Service</label>
                  <select value={service} onChange={this.userChange}>
                  <option name="options"> Choose one of your skill</option>
                    <option name="Plumbing Service"> Plumbing Service</option>
                    <option name="Moving Service">Moving Service</option>
                    <option name="Electrician"> Electrician</option>
                    <option name="Landscaping">Landscaping</option>
                    <option name="House Remodeling"> House Remodeling</option>
                    <option name="Canvas & pencil Art">
                      Canvas & pencil Art
                    </option>
                    <option name="Animatorse"> Animators</option>
                    <option name="Photography">Photography</option>
                    <option name="Logo Design">Logo Design</option>
                  </select>
                </div>
                <div className="description">
                  <lable htmlFor="suggestion">
                    Say few words that define you :
                  </lable>
                  <textarea
                    cols="20"
                    rows="6"
                    className="form-control"
                    id="message"
                    placeholder="It is like your resume.... "
                    value={Description}
                    onChange={this.userChange}
                    noValidate
                  ></textarea>
                </div>
                <div className="createAccount">
                  <button type="submit" onClick={this.updateUser}>
                    {"Update"}

                  </button>
                </div>
              </form>
            </div>
          </div>
        </div>
      );
    }
  }

, когда я пытаюсь реализовать запрос put с приведенным выше кодом, он показывает ошибку.

...