reactjs - axios 将请求放入反应中返回空

Question

我对 React 和 Call 请求很陌生。我正在使用 React、express、MySql 和 Sequelize 构建一个全栈应用程序。除了编辑客户信息的 Put 请求外，一切正常。我正在使用 Axios 进行这些调用，我可以在应用程序中添加、查看和删除数据，但编辑部分不起作用。

当点击表单上的提交按钮时，Put 请求返回一个空数组，而不是实际修改的数据。我的路线没问题（我相信），因为用 Postman 测试它工作得很好。我几乎可以肯定我的问题出在 axios 调用中使用的方法上，但我不能只找到正确的方法让它工作。任何帮助将不胜感激。

import React, { Component } from 'react';
import axios from 'axios';
import API from '../../utils/API';

class index extends Component {

constructor(props) {
    super(props);

    this.onChangeLastName = this.onChangeLastName.bind(this);
    this.onChangeFirstName = this.onChangeFirstName.bind(this);
    this.onChangePhone = this.onChangePhone.bind(this);
    this.onChangePetName = this.onChangePetName.bind(this);
    this.onChangeBreed = this.onChangeBreed.bind(this);
    this.onChangeNotes = this.onChangeNotes.bind(this);

    this.onSubmit = this.onSubmit.bind(this);
    this.state = {
        client: null
    }

}

componentDidMount() {

    let id = this.props.match.params.id
    API.getClient(id)
        .then(res => {
            this.setState({
                client: res.data
            })
            console.log(this.state.client.id)
        })
        .catch(error => console.log(error))
}


onChangeLastName(e) {
    this.setState({
        lastName: e.target.value
    });
}

onChangeFirstName(e) {
    this.setState({
        firstName: e.target.value
    });
}

onChangePhone(e) {
    this.setState({
        phone: e.target.value
    });
}

onChangePetName(e) {
    this.setState({
        petName: e.target.value
    });
}

onChangeBreed(e) {
    this.setState({
        breed: e.target.value
    });
}

onChangeNotes(e) {
    this.setState({
        notes: e.target.value
    });
}

onSubmit(e) {
    e.preventDefault();

    let obj = {
        lastName: this.state.client.lastName.value,
        firstName: this.state.client.firstName.value,
        phone: this.state.client.phone.value,
        petName: this.state.client.petName.value,
        breed: this.state.client.breed.value,
        notes: this.state.client.notes.value
    };

    let id = this.state.client.id

    axios.put("http://localhost:3000/api/clients/" + id, obj)

        // .then(alert("client Updated"))
        .then(res => console.log(res))
        .catch(error => console.log(error))

    this.props.history.push('/admin');
}

render() {

    const client = this.state.client ? (
        <div className="client">
            <h3 style={{ marginLeft: "60px" }}>Update Client</h3>

            <form onSubmit={this.onSubmit} style={{ padding: "60px" }}>
                <div className="form-group">
                    <label>Last Name: </label>
                    <input type="text"
                        className="form-control"
                        defaultValue={this.state.client.lastName}
                        onChange={this.onChangeLastName}
                    />
                </div>
                <div className="form-group">
                    <label>First Name: </label>
                    <input type="text"
                        className="form-control"
                        defaultValue={this.state.client.firstName}
                        onChange={this.onChangeFirstName}
                    />
                </div>
                <div className="form-group">
                    <label>Phone: </label>
                    <input type="text"
                        className="form-control"
                        defaultValue={this.state.client.phone}
                        onChange={this.onChangePhone}
                    />
                </div>
                <div className="form-group">
                    <label>Pet Name: </label>
                    <input type="text"
                        className="form-control"
                        defaultValue={this.state.client.petName}
                        onChange={this.onChangePetName}
                    />
                </div>
                <div className="form-group">
                    <label>Breed: </label>
                    <input type="text"
                        className="form-control"
                        defaultValue={this.state.client.breed}
                        onChange={this.onChangeBreed}
                    />
                </div>
                <div className="form-group">
                    <label>Notes: </label>
                    <input type="text"
                        className="form-control"
                        defaultValue={this.state.client.notes}
                        onChange={this.onChangeNotes}
                    />
                </div>

                <br />
                <div className="form-group">
                    <input type="submit" value="Update Client" 
                     className="btn btn-primary" />
                </div>
            </form>

        </div>
    ) : (
            <div className="center">Loading Client</div>
        )

    return (


            <div className="container">
                {client}
            </div>
        )
    }
}

export default index;

标签： reactjsaxios

Answer 1

我假设这是因为您处理输入的 onchange 的方式。您想将 onchange 设置为您所在州的客户端值。但相反，您将其设置为状态本身。因此，当您构建要发送到后端的对象时，您发送的是空数据，因为您尚未将任何数据设置为您所在州的实际客户端值，并且它仍然为空。尝试控制台记录状态，您将看到我在说什么。此外，您要.value在尝试构建对象的每个状态值的末尾添加一个，这不是必需的。最后，您不需要为每个输入指定 onchange 只需给输入一个 name 属性，您可以像这样设置 onchange 处理程序：

onChange = e => {
  this.setState({
    [e.target.name]: e.target.value
  })
}

所以你的组件看起来像下面这样：

import React, { Component } from 'react';
import axios from 'axios';
import API from '../../utils/API';

class index extends Component {

constructor(props) {
    super(props);

    this.onChange = this.onChange.bind(this);

    this.onSubmit = this.onSubmit.bind(this);
    this.state = {
        client: null
    }

}

componentDidMount() {

    let id = this.props.match.params.id
    API.getClient(id)
        .then(res => {
            this.setState({
                client: res.data
            })
            console.log(this.state.client.id)
        })
        .catch(error => console.log(error))
}


onChange(e) {
    this.setState({
        client: {
             ...this.state.client,
             [e.target.name]: e.target.value
        }
    });
}


onSubmit(e) {
    e.preventDefault();

    let obj = {
        lastName: this.state.client.lastName,
        firstName: this.state.client.firstName,
        phone: this.state.client.phone,
        petName: this.state.client.petName,
        breed: this.state.client.breed,
        notes: this.state.client.notes
    };

    let id = this.state.client.id

    axios.put("http://localhost:3000/api/clients/" + id, obj)

        // .then(alert("client Updated"))
        .then(res => console.log(res))
        .catch(error => console.log(error))

    this.props.history.push('/admin');
}

render() {

    const client = this.state.client ? (
        <div className="client">
            <h3 style={{ marginLeft: "60px" }}>Update Client</h3>

            <form onSubmit={this.onSubmit} style={{ padding: "60px" }}>
                <div className="form-group">
                    <label>Last Name: </label>
                    <input type="text"
                        name="lastName"
                        className="form-control"
                        defaultValue={this.state.client.lastName}
                        onChange={this.onChange}
                    />
                </div>
                <div className="form-group">
                    <label>First Name: </label>
                    <input type="text"
                        name="firstName"
                        className="form-control"
                        defaultValue={this.state.client.firstName}
                        onChange={this.onChange}
                    />
                </div>
                <div className="form-group">
                    <label>Phone: </label>
                    <input type="text"
                        name="phone"
                        className="form-control"
                        defaultValue={this.state.client.phone}
                        onChange={this.onChange}
                    />
                </div>
                <div className="form-group">
                    <label>Pet Name: </label>
                    <input type="text"
                        name="petName"
                        className="form-control"
                        defaultValue={this.state.client.petName}
                        onChange={this.onChange}
                    />
                </div>
                <div className="form-group">
                    <label>Breed: </label>
                    <input type="text"
                        name="breed"
                        className="form-control"
                        defaultValue={this.state.client.breed}
                        onChange={this.onChange}
                    />
                </div>
                <div className="form-group">
                    <label>Notes: </label>
                    <input type="text"
                        name="notes"
                        className="form-control"
                        defaultValue={this.state.client.notes}
                        onChange={this.onChange}
                    />
                </div>

                <br />
                <div className="form-group">
                    <input type="submit" value="Update Client" 
                     className="btn btn-primary" />
                </div>
            </form>

        </div>
    ) : (
            <div className="center">Loading Client</div>
        )

    return (


            <div className="container">
                {client}
            </div>
        )
    }
}

export default index;