Bộ định tuyến phản ứng nơi sử dụng AJAX

Question

Tôi đang làm việc trên một dự án sử dụng React Router và tôi đang gặp một số sự cố với luồng dữ liệu.

Trên mỗi trang có cuộc gọi AJAX nhận dữ liệu cho thành phần đó. Tôi đã được đặt chúng trong componentDidMount:

// Below code is written in ES6 
componentDidMount(){ 
    $.get(someURL, (data)=>{ 
    this.setState({data:data}) 
    }) 
} 

Mặc dù công trình này trên tải ban đầu, nó không được gọi một lần nữa khi những thay đổi url (làm mới nhãn hiệu là cần thiết). Tôi dường như không thể tìm thấy life cycle thích hợp để thực hiện cuộc gọi AJAX.

Ai đó hãy khai sáng cho tôi bằng cách tiếp cận thích hợp để nhận dữ liệu trong Bộ định tuyến phản ứng.

Answer 1

Sau một chút tìm kiếm xung quanh, this README cuối cùng sẽ giải quyết được sự cố.

Có 2 giải pháp được nêu trong tài liệu:

1. Sử dụng addHandlerKey={true}:

   <Route handler={User} path="/user/:userId" addHandlerKey={true} />

2. Sử dụng componentWillReceiveProps thay vì componentDidMount.

   • Tôi đã sử dụng cả hai, componentDidMount cho lần tải ban đầu, componentWillReceiveProps cho lần tải tiếp theo.
   • Vì chúng chia sẻ cùng một mã, tôi đã tạo một hàm mới _updateState và gọi nó trong cả hai vòng đời.

---

Mã của tôi bây giờ là:

class Classes extends React.Component { 
    componentDidMount(){ this._updateState() } 
    componentWillReceiveProps(){ this._updateState() } 
    _updateState(){ 
    $.get(/*Some URL*/, (data)=>{ 
     this.setState({data:data}) 
    }) 
    } 
}