React Router - Lịch sử bắn trước tiên thay vì chờ đợi

Question

Xin chào các bạn có vấn đề ở đây với phương pháp kích hoạt không đúng thứ tự. Tôi không thể tìm ra cách làm cho việc chờ đợi this.props.history.pushState(null, '/authors'); trong phương thức saveAuthor().

Trợ giúp sẽ được đánh giá cao.

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

Tìm nạp là hàm không đồng bộ. Việc thực hiện tiếp tục đến dòng tiếp theo trước khi yêu cầu kết thúc. Bạn cần phải xếp hàng mã để chạy sau khi yêu cầu hoàn tất. Cách tốt nhất để làm điều đó là làm cho phương thức postAuthor của bạn trả về lời hứa, và sau đó sử dụng phương thức .then của lời hứa trong người gọi.

class ManageAuthorPage extends Component { 
// ... 
    postAuthor() { 
    return 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 
     }) 
    }); 
    }; 

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

Nếu bạn đang sử dụng một transpiler có hỗ trợ chức năng async ES7, sau đó bạn thậm chí có thể làm điều này trong phương pháp saveAuthor của bạn, đó là tương đương và dễ đọc hơn:

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

Answer 2

Vì vậy, đây là bởi vì phương pháp postAuthor của bạn có một cuộc gọi không đồng bộ để fetch() bên trong của nó. Đây là thời gian mà bạn muốn truyền vào một hàm như gọi lại hàm, và sau đó gọi hàm đó bên trong cuộc gọi lại "hoàn thành" của cuộc gọi fetch. Mã sẽ trông giống như sau:

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'); 
    }); 
};