componentWillReceiveProps ได้ถูกเปลี่ยนชื่อ

ฉันใช้ Material ui SwipeableViews ที่ใช้แพ็คเกจ ReactSwipableView ฉันได้รับข้อผิดพลาดนี้บนคอนโซล

react-dom.development.js: 12466 คำเตือน: componentWillReceiveProps ได้ถูกเปลี่ยนชื่อแล้วและไม่แนะนำให้ใช้ ดูรายละเอียดที่

• ย้ายข้อมูลการดึงรหัสหรือผลข้างเคียงไปยัง componentDidUpdate
• หากคุณกำลังอัปเดตสถานะเมื่อใดก็ตามที่อุปกรณ์ประกอบฉากเปลี่ยนแปลงให้ทำซ้ำรหัสของคุณเพื่อใช้เทคนิคการบันทึกความจำหรือย้ายไปที่ getDerivedStateFromProps คงที่ เรียนรู้เพิ่มเติมได้ที่:
• เปลี่ยนชื่อ componentWillReceiveProps เป็น UNSAFE_componentWillReceiveProps เพื่อยับยั้งคำเตือนนี้ในโหมดที่ไม่เข้มงวด ใน React 17.x เฉพาะชื่อ UNSAFE_ เท่านั้นที่จะใช้งานได้ ในการเปลี่ยนชื่อวงจรชีวิตที่คัดค้านทั้งหมดไปเป็นชื่อใหม่คุณสามารถเรียกใช้npx react-codemod rename-unsafe-lifecyclesในโฟลเดอร์ซอร์สโครงการของคุณ

กรุณาอัพเดทองค์ประกอบต่อไปนี้: ReactSwipableView

มีวิธีใดที่จะกำจัดข้อผิดพลาดนี้ฉันลอง UNSAFE_componentWillReceiveProps แต่ไม่มีอะไรเปลี่ยนแปลง

ดูเหมือนว่าสิ่งนี้ได้ถูกรายงานไปยังผู้ดูแลแล้ว

ตอนนี้ในฐานะผู้บริโภคซอฟต์แวร์โอเพ่นซอร์สคุณอาจ:

• รอให้พวกเขาแก้ไข (หรือไม่แก้ไข) ปัญหา
• ใจเย็นและส่ง PR เพื่อแก้ไขให้พวกเขา :) นี่คือข้อมูลอ้างอิงทั้งหมดcomponentWillReceivePropsใน repo
• ค้นหาแพ็คเกจใหม่ที่จะใช้

ท้ายที่สุดนี่ไม่ใช่ข้อผิดพลาดที่เกี่ยวข้องกับซอฟต์แวร์ของคุณ แต่ขึ้นอยู่กับการพึ่งพา มันไม่ใช่ความรับผิดชอบของคุณที่จะแก้ไขสิ่งเหล่านั้น หากแอปของคุณทำงานก็จะไม่เป็นไร คำเตือนจากreact-dom.development.jsจะไม่ปรากฏในการผลิต

ใช้getDerivedStateFromPropsแทนcomponentWillReceiveProps

ตัวอย่างเช่น:

ก่อน:

// 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,
      });
    }
  }
}

หลังจาก:

// 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

ฉันมีปัญหาในการค้นหาที่ในรหัสของฉัน componentWillReceiveProps ถูกเรียก ฉันสังเกตเห็นในคำเตือนมันพูดถึงส่วนประกอบเฉพาะ "drawer" ซึ่งเป็นส่วนหนึ่งของ lib-ant ที่เราใช้ หลังจากอัปเกรด ant-d เป็นเวอร์ชั่นล่าสุดคำเตือนก็หายไป

เป็นข้อผิดพลาดทั่วไปที่เกิดขึ้นในโครงการเนทีฟแบบโต้ตอบเพื่อให้สามารถแก้ไขได้โดยทำตามขั้นตอนต่อไปนี้:

• ขั้นแรกให้ติดตั้ง Lodash ในไดเร็คทอรี่โปรเจคตอบโต้ของคุณ

npm i --save lodash

- หลังจากนั้นเขียนรหัสต่อไปนี้ในไฟล์. js ของคุณ:

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