компонентWillReceiveProps було перейменовано


10

Я використовую Material ui SwipeableViews, який використовує пакет ReactSwipableView, я отримую цю помилку на консолі

react-dom.development.js: 12466 Попередження: компонентWillReceiveProps був перейменований і не рекомендується використовувати. Детальніше дивіться.

  • Перемістіть код отримання даних або побічні ефекти в компонентDidUpdate.
  • Якщо ви оновлюєте стан, коли змінюється реквізит, перефактуруйте код, щоб використовувати методи запам'ятовування, або перенесіть його на статичний getDerivedStateFromProps. Дізнайтеся більше на:
  • Перейменуйте компонентWillReceiveProps на UNSAFE_componentWillReceiveProps, щоб придушити це попередження в не строгому режимі. У React 17.x працюватиме лише ім’я UNSAFE_. Щоб перейменувати всі застарілі життєві цикли на їхні нові імена, можна запустити npx react-codemod rename-unsafe-lifecyclesу папці джерела проекту.

Оновіть наступні компоненти: ReactSwipableView

чи є спосіб позбутися цієї помилки, я спробував UNSAFE_componentWillReceiveProps, але нічого не змінилося


1
Ви використовуєте componentWillReceivePropsу своєму компоненті, чи це походить з вашого пакету?
Мартін

1
приходить з пакету «реагувати на швидкий перегляд»
Buk Lau

Відповіді:


8

Здається, про це вже повідомляли технічні працівники.

Тепер, як споживач програмного забезпечення з відкритим кодом, ви можете:

Зрештою, це не помилка, пов’язана з вашим програмним забезпеченням, а залежність, на яку вона покладається. Насправді це не ваша відповідальність, щоб виправити це. Якщо ваш додаток працює, це буде добре. Попередження від react-dom.development.jsне з’являться у виробництві.


2

Використовуйте 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


1

У мене виникли проблеми з визначенням того, куди в моєму кодовому компонентіWillReceiveProps викликається. Я зауважив, що в попередженні згадується конкретний компонент "Ящик", який був частиною мурашиної мурашки, яку ми використовуємо. Після оновлення ant-d до останньої версії попередження пройшло.


1

Це звичайна помилка, яка виникає в реагуванні нативного проекту. Тому його можна вирішити, виконавши наступні кроки:

  • Спочатку встановіть 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);
    } 
   };
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.