2017-03-28 18 views
1

私は初心者です。js私は頻繁にAPIリクエストを行う小さなアプリケーションで作業しています。だから私が直面している問題は、ユーザーがこれらのフィールドに変更を加えた場合、データベースに新しいフィールド値を投稿しているときに、フォームフィールドがデータベースから事前に設定されたページがあることです。送信ボタンがクリックされると、そこからsaveAndConttinue()が呼び出され、addNewAddress()が条件に基づいて呼び出されます。しかし、問題は、私がaddNewAddressから得た応答は、キュー内の次のAPI呼び出しに使用する必要がありますが、応答を取得する時間がかかり、address_idはポストコールのnull値を持っています。今のところflux/reduxを使って、同期コールを反応させる方法はありますか?反応するjsで同期API呼び出し要求を行うには

saveAndContinue(e) { 
e.preventDefault(); 

if(this.props.params.delivery === 'home_delivery' && this.state.counter) { 
    this.addNewAddress(); 
} 

console.log('add id is '+this.state.address_id); 
const config = { headers: { 'Content-Type': 'multipart/form-data' } }; 
let fd = new FormData(); 
fd.append('token', this.props.params.token); 
fd.append('dish_id', this.props.params.dish_id); 
fd.append('address_type', this.props.params.delivery); 
fd.append('address_id', this.state.address_id); 
fd.append('ordered_units', this.props.params.quantity); 
fd.append('total_cost', this.props.params.total_cost); 
fd.append('total_service_charge', this.props.params.service_charge); 
fd.append('net_amount', this.props.params.net_cost); 
fd.append('hub_id', this.props.params.hub_id); 
fd.append('delivery_charge', this.props.params.delivery_charge); 
fd.append('payment_type', this.state.payment_type); 
fd.append('device_type', 'web'); 

axios.post(myConfig.apiUrl + '/api/foody/orders/purchase' , fd, config) 
     .then(function(response){ 
    if(response.data.success) { 
     console.log(response); 
     browserHistory.push('/order_confirmed/'); 
    } else { 
     console.log(response); 
     //alert(response.data.message) 
    } 
     }); 
} 

addNewAddress() { 
const config = { headers: { 'Content-Type': 'multipart/form-data' } }; 
let fd = new FormData(); 

    if(this.props.params.user_type === 'new') { 
    fd.append('type', 'PRIMARY'); 
    } 

    fd.append('token', this.props.params.token); 
    fd.append('block', this.state.block); 
    fd.append('door_num', this.state.door_num); 
    fd.append('address', this.props.params.address); 
    fd.append('locality', this.props.params.locality); 
    fd.append('landmark', this.props.params.landmark); 
    fd.append('hub_id', this.props.params.hub_id); 
    axios.post(myConfig.apiUrl + '/api/user/add-address' , fd, config) 
    .then(function(response){ 
     this.setState({address_id: response.data.data['id']}); 
     console.log(this.state.address_id); 
    }.bind(this)); 
} 

答えて

2

あなたはaddNewAddress(の返される約束に)addNewAddress(後に、キュー内の次の要求をコールする必要があるとしている):

addNewAddress() { 
    axios.post()... 
    .then(function (response) { 

    // Set state 
    this.setState({address_id: response.data.data['id']}); 

    // [Call next API request here] 
    // ... 

    }) 
} 

同期呼び出しを行うには、常に悪い考えです、私は個人的にそれに反対して、上記のように返された約束で次の呼び出しをします。

+1

また、 'setState'は非同期であり、Reactであることに注意してください。 'address_id'がセットされていることを確認したいなら、' setState'を第2引数として送るコールバック関数で次のAPI呼び出しを行うべきです。それは何かのようなものかもしれない 'this.setState({address_id:response.data.data ['id']}、this.nextApiCall());' –

+0

何とか私はそれを逃した働いた: –

+0

@CésarLandesa情報、これはpefectly働いた –

関連する問題