Question

我有一个带有表单的react-native组件，我想发送和删除id上的数据。现在我无法发送表单，我使用Fetch POST并汇总数据使用日期名称的JSON格式，例如{data：{name：'test name'}}

我错过了，这是我的代码如果不难描述或给出文章的链接如何删除id

class NewRecord extends Component {
constructor(props) {
    super(props);

    this.state = {
        name: '',
        phone: '',
        address: ''
    };

    this.handleNameChange = this.handleNameChange.bind(this);
    this.handlePhoneChange = this.handlePhoneChange.bind(this);
    this.handleAddressChange = this.handleAddressChange.bind(this);

    this.handleSubmit = this.handleSubmit.bind(this);
}

handleSubmit(event) {
    event.preventDefault();

    let data = {
        name: this.state.name,
        phone: this.state.phone,
        address: this.state.address
    };

    if (this.state.name !== '' && this.state.phone !== '' && this.state.address !== '') {
        console.log('name', this.state.name, 'phone ', this.state.phone, 'address ', this.state.address);

        fetch("example.com/:id", {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            mode: "cors",
            body: JSON.stringify(data)
        })
            .then(response => response.json())
            .then(data => console.log(data))
            .catch(error => console.log(error));

    } else {
        alert('no')
    }
}

handleNameChange(event) {
    console.log('handleNameChange', this);
    this.setState({name: event.target.value});
}

handlePhoneChange(event) {
    console.log('handleNameChange', this);
    this.setState({phone: event.target.value});
}

handleAddressChange(event) {
    console.log('handleNameChange', this);
    this.setState({address: event.target.value});
}

render() {
    return (
        <form className='form__row' method='POST' onSubmit={this.handleSubmit}>
            <input
                type="text"
                placeholder="NAME"
                value={this.state.name}
                onChange={this.handleNameChange}
            />
            <input
                type="text"
                placeholder="PHONE"
                value={this.state.phone}
                onChange={this.handlePhoneChange}
            />
            <input
                type="text"
                placeholder="ADDRESS"
                value={this.state.address}
                onChange={this.handleAddressChange}
            />
            <button type='submit'>save</button>
        </form>
    );
}
}

Answer 1

尝试取出

class NewRecord extends Component {
    constructor(props) {
        super(props);

    this.state = {
        name: '',
        phone: '',
        address: ''
    };

    this.handleNameChange = this.handleNameChange.bind(this);
    this.handlePhoneChange = this.handlePhoneChange.bind(this);
    this.handleAddressChange = this.handleAddressChange.bind(this);

    this.handleSubmit = this.handleSubmit.bind(this);
}

handleSubmit(event) {
    event.preventDefault();
    let data = [
        {
            data:
                {
                    name: this.state.name,
                    phone: this.state.phone,
                    address: this.state.address
                }
        }
    ];
    console.log(data);
        fetch('http://server.noorsoft.ru:9022/api/records/:id', {
            method: 'post',
            headers: {
                'Accept': 'application/json, text/plain, */*',
                'Content-type': 'application/json, charset=utf-8'
            },
            body: JSON.stringify(data)
        })
            .then(data => console.log(data))
}

handleNameChange(event) {
    this.setState({name: event.target.value});
}

handlePhoneChange(event) {
    this.setState({phone: event.target.value});
}

handleAddressChange(event) {
    this.setState({address: event.target.value});
}

render() {
    return (
        <form className='form__row' onSubmit={this.handleSubmit}>
            <input
                type="text"
                placeholder="name"
                value={this.state.name}
                onChange={this.handleNameChange}
            />
            <input
                type="text"
                placeholder="PHONE"
                value={this.state.phone}
                onChange={this.handlePhoneChange}
            />
            <input
                type="text"
                placeholder="ADDRESS"
                value={this.state.address}
                onChange={this.handleAddressChange}
            />
            <button type='submit'>save</button>
        </form>
    );
}
}

然后只记录对控制台的直接响应。

.then(response => response.json())
.then(data => console.log(data))

也许，您也可以通过调试指定获取错误的行。

Answer 2

从服务器接收到HTTP代码204时，由于没有要解析的内容，因此无法调用response.json()！相反，如果要检查请求是否成功，只需检查response.ok

反应POST表单获取

2 个答案: