thành phầnWillReceiveProps đã được đổi tên

Tôi đang sử dụng Tài liệu ui SwipizableViews Sử dụng gói ReactSwipableView, tôi gặp lỗi này trên bảng điều khiển

Reac-dom.development.js: 12466 Cảnh báo: thành phầnWillReceiveProps đã được đổi tên và không được khuyến khích sử dụng. Xem để biết chi tiết.

• Di chuyển mã tìm nạp dữ liệu hoặc tác dụng phụ sang thành phầnDidUpdate.
• Nếu bạn đang cập nhật trạng thái bất cứ khi nào đạo cụ thay đổi, hãy cấu trúc lại mã của bạn để sử dụng các kỹ thuật ghi nhớ hoặc di chuyển nó sang tĩnh getDerivingStateFromProps. Tìm hiểu thêm tại:
• Đổi tên thành phầnWillReceiveProps thành UNSAFE_componentWillReceiveProps để chặn cảnh báo này ở chế độ không nghiêm ngặt. Trong React 17.x, chỉ tên UNSAFE_ sẽ hoạt động. Để đổi tên tất cả các vòng đời không dùng sang tên mới của chúng, bạn có thể chạy npx react-codemod rename-unsafe-lifecyclestrong thư mục nguồn dự án của mình.

Vui lòng cập nhật các thành phần sau: ReactSwipableView

Có cách nào để loại bỏ lỗi này không, tôi đã thử UNSAFE_componentWillReceiveProps nhưng không có gì thay đổi

Có vẻ như điều này đã được báo cáo cho các nhà bảo trì rồi.

Bây giờ, với tư cách là người tiêu dùng phần mềm nguồn mở, bạn có thể:

• chờ họ khắc phục (hoặc không sửa) vấn đề
• hãy bình tĩnh và gửi PR để sửa nó cho họ :) Dưới đây là tất cả các tài liệu tham khảocomponentWillReceiveProps trong repo
• tìm một gói mới để sử dụng

Cuối cùng, đây không phải là một lỗi liên quan đến phần mềm của bạn, nhưng sự phụ thuộc mà nó phụ thuộc vào. Đó không thực sự là trách nhiệm của bạn để sửa chữa những điều đó. Nếu ứng dụng của bạn chạy, nó sẽ ổn thôi. Cảnh báo từ react-dom.development.jssẽ không xuất hiện trong sản xuất.

Sử dụng getDerivedStateFromPropsthay vìcomponentWillReceiveProps

Ví dụ:

Trước:

// Before
class ExampleComponent extends React.Component {
  state = {
    isScrollingDown: false,
  };

  componentWillReceiveProps(nextProps) {
    if (this.props.currentRow !== nextProps.currentRow) {
      this.setState({
        isScrollingDown:
          nextProps.currentRow > this.props.currentRow,
      });
    }
  }
}

Sau:

// After
class ExampleComponent extends React.Component {
  // Initialize state in constructor,
  // Or with a property initializer.
  state = {
    isScrollingDown: false,
    lastRow: null,
  };

  static getDerivedStateFromProps(props, state) {
    if (props.currentRow !== state.lastRow) {
      return {
        isScrollingDown: props.currentRow > state.lastRow,
        lastRow: props.currentRow,
      };
    }

    // Return null to indicate no change to state.
    return null;
  }
}

https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html

Tôi gặp vấn đề khi tìm kiếm ở đâu trong thành phần mã của mìnhWillReceiveProps đang được gọi. Tôi đã thông báo trong cảnh báo rằng nó đã đề cập đến một thành phần cụ thể, "Ngăn kéo", một phần của lib-d lib chúng tôi đang sử dụng. Sau khi nâng cấp ant-d lên phiên bản mới nhất, cảnh báo đã biến mất.

Đó là một lỗi phổ biến xảy ra trong phản ứng dự án gốc. Vì vậy, nó có thể được giải quyết bằng các bước sau:

• Đầu tiên cài đặt lodash trong thư mục dự án gốc phản ứng của bạn, tức là,

npm i --save lodash

-Sau đó hãy viết đoạn mã sau vào tệp .js của bạn:

    import { YellowBox } from 'react-native';
    import _ from 'lodash';

    YellowBox.ignoreWarnings(['componentWillReceiveProps']);
    const _console = _.clone(console);
    console.warn = message => {
    if (message.indexOf('componentWillReceiveProps') <= -1) {
     _console.warn(message);
    } 
   };