Có cách nào để kiểm tra xem thành phần phản ứng đã được tháo chưa?

Question

Tôi có một usecase nơi tôi cần phải tháo gắn kết thành phần phản ứng của tôi. Nhưng trong một số trường hợp, thành phần phản ứng cụ thể được tháo lắp bằng một chức năng khác. Do đó, tôi cần kiểm tra xem thành phần có được gắn trước khi tháo gắn nó hay không.

Answer 1

Kể từ isMounted() đã được chính thức phản đối, bạn có thể làm điều này trong thành phần của bạn:

componentDidMount() { 
    this._ismounted = true; 
} 

componentWillUnmount() { 
    this._ismounted = false; 
} 

mô hình này của việc duy trì biến state của riêng bạn là chi tiết trong tài liệu ReactJS: https://facebook.github.io/react/blog/2015/12/16/ismounted-antipattern.html

Answer 2

tôi phát hiện ra rằng thành phần sẽ được bỏ gắn kết, tạo điền vào ô này

if(!this._calledComponentWillUnmount)this.setState({vars});

Answer 3

Tôi đã đến đây vì tôi đang tìm cách ngăn chặn polling API.

react docs không bao gồm trường hợp websocket, nhưng không bao gồm trường hợp bỏ phiếu.

Cách tôi làm việc xung quanh nó

// React component 
let allowPolling = true 

React.createClass({ 
    poll() { 
     if (!allowPolling) { 
      return 
     } 
     // otherwise, call the api 
    } 
    componentWillMount() { 
     allowPolling = true 
    } 
    componentWillUnmount() { 
     allowPolling = false 
    } 
}) 

nó hoạt động. Hy vọng nó giúp

Xin vui lòng, cho tôi biết nếu bạn biết bất kỳ trường hợp thử nghiệm thất bại cho điều này =]

Answer 4

Tôi nghĩ rằng Shubham Câu trả lời là một cách giải quyết đề nghị của phản ứng cho những người mà cần phải chuyển mã của họ ngừng sử dụng các isMounted chống mẫu.

Điều này không hẳn là xấu, nhưng đáng để liệt kê các giải pháp thực sự cho vấn đề này.

The article linked by Shubham cung cấp 2 đề xuất để tránh mẫu chống này. Một trong những bạn cần phụ thuộc vào lý do tại sao bạn đang gọi setState khi các thành phần được unmounted.

nếu bạn đang sử dụng một cửa hàng Flux trong thành phần của bạn, bạn phải ngừng đăng ký trong componentWillUnmount

class MyComponent extends React.Component { 
    componentDidMount() { 
    mydatastore.subscribe(this); 
    } 
    render() { 
    ... 
    } 
    componentWillUnmount() { 
    mydatastore.unsubscribe(this); 
    } 
} 

Nếu bạn sử dụng ES6 hứa hẹn, bạn có thể cần phải quấn lời hứa của mình để làm cho nó có thể hủy bỏ.

const cancelablePromise = makeCancelable(
    new Promise(r => component.setState({...}})) 
); 

cancelablePromise 
    .promise 
    .then(() => console.log('resolved')) 
    .catch((reason) => console.log('isCanceled', reason.isCanceled)); 

cancelablePromise.cancel(); // Cancel the promise 

Đọc về nhiều makeCancelable trong bài viết liên kết.

Tóm lại, đừng cố gắng vá lỗi này bằng cách đặt biến và kiểm tra xem thành phần có được gắn kết hay không, đi tới gốc của sự cố. Hãy bình luận với các trường hợp thông thường khác nếu bạn có thể đưa ra bất kỳ trường hợp nào.