componentWillReceiveProps 已重命名

Question

我正在使用使用 ReactSwipableView 包的 Material ui SwipeableViews，我在控制台上收到此错误

react-dom.development.js:12466 警告：componentWillReceiveProps 已重命名，不推荐使用。详情请参阅。

• 将数据获取代码或副作用移动到 componentDidUpdate。
• 如果您在道具更改时更新状态，请重构您的代码以使用记忆技术或将其移动到静态 getDerivedStateFromProps。了解更多信息：
• 将 componentWillReceiveProps 重命名为 UNSAFE_componentWillReceiveProps 以在非严格模式下抑制此警告。在 React 17.x 中，只有 UNSAFE_ 名称有效。要将所有已弃用的生命周期重命名为其新名称，您可以npx react-codemod rename-unsafe-lifecycles在项目源文件夹中运行。

请更新以下组件：ReactSwipableView

有什么办法可以摆脱这个错误我确实尝试过 UNSAFE_componentWillReceiveProps 但没有任何改变

Answer 1

似乎这已经向维护者报告了。

现在，作为开源软件的消费者，您可以：

• 等待他们解决（或不解决）问题
• 保持冷静并提交 PR 为他们修复它:)以下是componentWillReceivePropsrepo中的所有引用
• 找到一个新的包来使用

最终，这不是与您的软件相关的错误，而是它所依赖的依赖项。修复这些并不是你的责任。如果您的应用程序运行，那就没问题了。来自的警告react-dom.development.js不会出现在生产中。

Answer 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