componentWillReceiveProps telah diganti namanya

10

Saya menggunakan Material ui SwipeableViews yang menggunakan paket ReactSwipableView, saya mendapatkan kesalahan ini di konsol

react-dom.development.js: 12466 Peringatan: componentWillReceiveProps telah diganti nama, dan tidak disarankan untuk digunakan. Lihat detailnya.

  • Pindahkan data yang mengambil kode atau efek samping ke componentDidUpdate.
  • Jika Anda memperbarui status setiap kali props berubah, perbaiki kode Anda untuk menggunakan teknik memoisasi atau pindahkan ke getDerivedStateFromProps statis. Pelajari lebih lanjut di:
  • Ganti nama componentWillReceiveProps menjadi UNSAFE_componentWillReceiveProps untuk menekan peringatan ini dalam mode non-ketat. Di Bereaksi 17.x, hanya nama UNSAFE_ yang akan berfungsi. Untuk mengganti nama semua daur hidup yang tidak digunakan lagi ke nama baru mereka, Anda dapat menjalankannya npx react-codemod rename-unsafe-lifecyclesdi folder sumber proyek Anda.

Harap perbarui komponen berikut: ReactSwipableView

apakah ada cara untuk menghilangkan kesalahan ini saya mencoba UNSAFE_componentWillReceiveProps tetapi tidak ada yang berubah

Buk Lau
sumber
1
Apakah Anda menggunakan componentWillReceivePropsdi Anda komponen, atau yang berasal dari paket Anda?
Martin
1
itu datang dari paket reaksi-swipeable-views
Buk Lau

Jawaban:

9

Sepertinya ini sudah dilaporkan ke pengelola.

Sekarang, sebagai konsumen perangkat lunak sumber terbuka, Anda dapat:

Pada akhirnya, ini bukan kesalahan yang terkait dengan perangkat lunak Anda, tetapi ketergantungan yang diandalkannya. Sebenarnya bukan tanggung jawab Anda untuk memperbaikinya. Jika aplikasi Anda berjalan, itu akan baik-baik saja. Peringatan dari react-dom.development.jstidak akan muncul dalam produksi.

Martin
sumber
2

Gunakan getDerivedStateFromPropssebagai ganticomponentWillReceiveProps

Sebagai contoh:

Sebelum:

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

Setelah:

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

Bashirpour
sumber
1

Saya mengalami masalah menemukan di mana dalam komponen kode sayaWillReceiveProps dipanggil. Saya memang memperhatikan dalam peringatan itu disebutkan komponen tertentu, "Laci" yang merupakan bagian dari semut-d lib yang kita gunakan. Setelah memutakhirkan ant-d ke versi terbaru, peringatan itu hilang.

Chris Adams
sumber
1

Ini adalah kesalahan umum yang terjadi pada proyek asli yang bereaksi. Jadi itu dapat diatasi dengan langkah-langkah berikut:

  • Pertama instal lodash di direktori proyek asli reaksi Anda yaitu,
npm i --save lodash

-Setelah itu tulis kode berikut di file .js Anda:

    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);
    } 
   };
Suraj Shrestha
sumber