प्रतिक्रिया राउटर - इतिहास पहले की प्रतीक्षा करता है

Question

अरे लोगों को सही क्रम में नहीं फायरिंग विधियों के साथ यहां एक मुद्दा मिला। मैं यह नहीं समझ सकता कि this.props.history.pushState(null, '/authors'); को saveAuthor() विधि में कैसे प्रतीक्षा करें।

सहायता की सराहना की जाएगी।

import React, { Component } from 'react'; 
import AuthorForm from './authorForm'; 
import { History } from 'react-router'; 

const source = 'http://localhost:3000/authors'; 


// History Mixin Component Hack 
function connectHistory (Component) { 
    return React.createClass({ 
    mixins: [ History ], 
    render() { 
     return <Component {...this.props} history={this.history}/> 
    } 
    }) 
} 


// Main Component 
class ManageAuthorPage extends Component { 
    state = { 
    author: { id: '', firstName: '', lastName: '' } 
    }; 

    setAuthorState(event) { 
    let field = event.target.name; 
    let value = event.target.value; 
    this.state.author[field] = value; 
    return this.setState({author: this.state.author}); 
    }; 

    generateId(author) { 
    return `${author.firstName.toLowerCase()}-${author.lastName.toLowerCase()}` 
    }; 

// Main call to the API 

    postAuthor() { 
    fetch(source, { 
     method: 'post', 
     headers: { 
     'Accept': 'application/json', 
     'Content-Type': 'application/json' 
     }, 
     body: JSON.stringify({ 
      id: this.generateId(this.state.author), 
      firstName: this.state.author.firstName, 
     lastName: this.state.author.lastName 
     }) 
    }); 
    }; 

    // Calling Save author method but the this.props.history goes first rather than this.postAuthor(); 

    saveAuthor(event) { 
    event.preventDefault(); 
    this.postAuthor(); 
    this.props.history.pushState(null, '/authors'); 
    }; 

    render() { 
    return (
     <AuthorForm 
     author={this.state.author} 
     onChange={this.setAuthorState.bind(this)} 
     onSave={this.saveAuthor.bind(this)} 
     /> 
    ); 
    } 
} 



export default connectHistory(ManageAuthorPage) 

Answer 1

प्राप्त करना एक असीमित कार्य है। अनुरोध समाप्त होने से पहले अगली पंक्ति पर निष्पादन जारी है। अनुरोध समाप्त होने के बाद आपको चलाने के लिए कोड कतार की आवश्यकता है। ऐसा करने का सबसे अच्छा तरीका आपकी पोस्ट बनाना होगा प्राधिकरण विधि वादा वापस कर देगी, और फिर कॉलर में वादे की .थ विधि का उपयोग करें।

async saveAuthor(event) { 
    event.preventDefault(); 
    await this.postAuthor(); 
    this.props.history.pushState(null, '/authors'); 
    }; 

Answer 2

तो यह है क्योंकि आपके postAuthor विधि इसके अंदर fetch() को एक अतुल्यकालिक कॉल है। यह एक ऐसा समय है जहां आप फ़ंक्शन में कॉलबैक के रूप में फ़ंक्शन में पास करना चाहते हैं, और फिर fetch कॉल के "समापन" कॉलबैक के अंदर उस फ़ंक्शन को आमंत्रित करें। कोड इस तरह कुछ दिखाई देगा:

postAuthor(callback) { 
    fetch(source, { 
    /* Methods, headers, etc. */ 
    },() => { 
    /* Invoking the callback function that you passed */ 
    callback(); 
    }); 
); 

saveAuthor(event) { 
    event.preventDefault(); 
    /* Pass in a function to be invoked from within postAuthor when it is complete */ 
    this.postAuthor(() => { 
    this.props.history.pushState(null, '/authors'); 
    }); 
};