Блог

Главная - Вопросы по программированию - данные, не переданные из интерфейса в REST API

данные, не переданные из интерфейса в REST API

#javascript #reactjs #react-redux #react-hooks #react-router

Вопрос:

Вот мой код React JS:

 class App extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            person: {
                id: 0,
                name: "name",
                email: "email"
            }
        }
    }
        
    handleChange = (event) =>{
        const  {name, value} = event.target;
        //setting the state
        this.setState({person: { ...this.state.person, [name]: value }});
    }
    
    handleFormSubmission = (event) =>{
        event.preventDefault();
    }
    
    
    someFunction = () =>{
        let apiCall;
        let personState = JSON.stringify(this.state.person);

        apiCall = await axios.put(`http://localhost:8000/api/people/update/${this.state.person.id}/`, {personState}, {headers:{token: this.props.token}});

    }
    
    
    render() {
        return (
            <form id="parent-container" onSubmit={this.handleFormSubmission}>
                <input type=text" value={this.state.person.name} name="personName" onChange={this.handleChange}
                <input type=text" value={this.state.person.name} name="personName" onChange={this.handleChange}
                
                <button type="submit" onClick={() => this.someFunction()}>Submit</button>
            </form>
        );
    }

}
export default App;

Изучив запрос в Google Chrome, вот что я нашел:

Заголовки:

 General:

Request URL: http://localhost:8000/api/people/update/0/
Request Method: PUT
Status Code: 400 Bad Request
Remote Address: 127.0.0.1:8000
Referrer Policy: strict-origin-when-cross-origin

Response Headers:

Access-Control-Allow-Origin: http://localhost:3000
Allow: PUT, PATCH, OPTIONS
Content-Length: 598
Content-Type: application/json
Date: Fri, 10 Sep 2021 23:08:55 GMT
Server: WSGIServer/0.2 CPython/3.8.1
Vary: Accept, Cookie, Origin
X-Content-Type-Options: nosniff
X-Frame-Options: DENY

Request Headers:

Accept: application/json, text/plain, */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Accesstoken: someAccessToken
Connection: keep-alive
Content-Length: 503
Content-Type: application/json;charset=UTF-8
Host: localhost:8000
Origin: http://localhost:3000
Referer: http://localhost:3000/
sec-ch-ua: "Google Chrome";v="93", " Not;A Brand";v="99", "Chromium";v="93"
sec-ch-ua-mobile: ?1
sec-ch-ua-platform: "Android"
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
User-Agent: Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.63 Mobile Safari/537.36

Request Payload:
person: "{"id":6,"name":"some person","email":"aaa@email.com"}"

Вкладка «Ответ»:

 {
    "name":["This field is required."],
    "email":["This field is required."],
}

Конечная точка:

ПОЛОЖИТЬ http://localhost:8000/api/persons/update/6/ 400 (Плохой запрос)

Из того, что я вижу выше, следует, что он не передает данные с интерфейса в REST API с помощью запроса Axios PUT. Даже несмотря на то, что при использовании Postman для отправки данных и отправки запроса api это работает. Это происходит только с запросами PUT и POST, но запросы GET работают отлично.

в чем проблема, почему он не передает отправку данных из React в REST API в запросе Axios ?

Комментарии:

1. Работает ли это, когда вы пропускаете JSON.stringify() и отправляете состояние напрямую: await axios.put('myurl', this.state.person, {headers...}) ?

Ответ №1:

Вы устанавливаете свое состояние как

 this.setState({person: { ...this.state.person, [name]: value }});

которые делают вас name ключом в государстве.

Например, если пользователь введет john имя, ваше состояние будет выглядеть так:

 {
  john: 'something i don't know',
  email: 'sth'
}

Подробнее читайте здесь Вычисленные имена свойств

Измените эту строку на

 this.setState({person: { ...this.state.person, name: value }});

Ответ №2:

Таким образом, проблема заключалась в том, что я передавал объект в аргумент данных запроса Axios, он не должен быть заключен в фигурные скобки объекта {}.

Вот как это должно быть передано в Axios:

 apiCall = await axios.put(`http://localhost:8000/api/people/update/${this.state.person.id}/`, this.state.person, {headers:{token: this.props.token}});
Метки: ,