componentWillReceiveProps yeniden adlandırıldı


10

ReactSwipableView paketini kullanan Material ui SwipeableViews kullanıyorum, bu hatayı konsolda alıyorum

reakt-dom.development.js: 12466 Uyarı: componentWillReceiveProps yeniden adlandırılmıştır ve kullanılması önerilmez. Ayrıntılar için bakınız.

  • Veri alma kodunu veya yan efektleri componentDidUpdate'e taşıyın.
  • Sahne değiştiğinde durumu güncelliyorsanız, kodlama tekniklerini kullanmak veya statik getDerivedStateFromProps komutuna taşımak için kodunuzu yeniden düzenleyin. Daha fazla bilgi için:
  • Bu uyarıyı katı olmayan modda bastırmak için componentWillReceiveProps öğesini UNSAFE_componentWillReceiveProps olarak yeniden adlandırın. React 17.x'de yalnızca UNSAFE_ adı çalışacaktır. Kullanımdan kaldırılan tüm yaşam döngülerini yeni adlarıyla yeniden adlandırmak npx react-codemod rename-unsafe-lifecyclesiçin proje kaynak klasörünüzde çalıştırabilirsiniz .

Lütfen aşağıdaki bileşenleri güncelleyin: ReactSwipableView

UNSAFE_componentWillReceiveProps denedim mi bu hata kurtulmak için herhangi bir yolu var ama hiçbir şey değişiklik


1
Kullandığınız componentWillReceivePropsiçinde sizin bileşen veya paketinden geliyor?
Martin

1
tepkiyle değiştirilebilir görünümler paketinden geliyor
Buk Lau

Yanıtlar:


9

Bu zaten bakıcılara bildirilmiş gibi görünüyor.

Şimdi, açık kaynaklı bir yazılımın tüketicisi olarak şunları yapabilirsiniz:

Nihayetinde, bu yazılımınızla ilgili bir hata değil, bağlı olduğu bağımlılıklar. Bunları düzeltmek sizin sorumluluğunuzda değil. Uygulamanız çalışırsa, sorun olmaz. Adlı kişiden gelen uyarılar react-dom.development.jsüretimde görünmeyecek.


2

Yerine getDerivedStateFromPropskullanıncomponentWillReceiveProps

Örneğin:

Önce:

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

Sonra:

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


1

Benim kod bileşeniWillReceiveProps nerede çağrıldığını bulma sorunları vardı. Uyarıda, kullandığımız ant-d lib'in bir parçası olan belirli bir bileşen olan "Çekmece" den bahsetti. Ant-d'yi en son sürüme yükselttikten sonra uyarı ortadan kalktı.


1

Reaksiyon yerel projesinde sık karşılaşılan bir hatadır, bu nedenle aşağıdaki adımlarla çözülebilir:

  • Önce lodash'ı yerel yerel proje dizininize yükleyin, yani,
npm i --save lodash

-Ardından sonra .js dosyanıza aşağıdaki kodu yazı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);
    } 
   };
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.