javascript - getDerivedStateFromProps 未在 React Native 中调用

Question

我正在尝试使用新的 getDerivedStateFromProps我的 React Native 组件中的生命周期方法，但从未调用过该方法。我试过查找但找到了 no issues在 native repo 协议(protocol)中。 StackOverflow 或 Google 也没有结果。

我确实找到了一个 reddit thread和一个 StackOverflow issue两者都引用更新 react-dom 作为解决方案，这在这种情况下不起作用，因为 React Native 中没有 dom。

任何人都可以确认此方法是否应该在 React Native 中工作吗？如果可以使用，将不胜感激解决此问题的任何帮助。

下面是我的组件的简化版本:

import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';

import { Auth } from '../redux';
import ChillaAPI from '../api';

const withUserData = WrappedComponent => {
  class UserDataLoader extends React.Component {

    static getDerivedStateFromProps(props, state) {

      console.log('getDerivedStateFromProps');

      if (props.uid !== state.uid) {
        return {
          uid: props.uid,
        };
      }

      return state;
    }

    state = { uid: null };

    render() {
      console.log({ propsUid: this.props.uid });
      console.log({ stateUid: this.state.uid });
      return <WrappedComponent />;
    }
  }

  UserDataLoader.propTypes = {
    uid: PropTypes.bool.isRequired,
  };

  return connect(mapStateToProps)(UserDataLoader);

};

function mapStateToProps(state) {
  return {
    uid: Auth.selectors.getUid(state),
  };
}

export default withUserData;

组件的日志输出如下:

{ propsUid: null }
{ stateUid: null }
{ propsUid: 'jW78ej3JDgPpheadAlcrkG8UIZB2' }
{ stateUid: null }

这是我的 package.json 以备不时之需:

{
  "name": "Chilla",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "start:reset": "node node_modules/react-native/local-cli/cli.js start --reset-cache",
    "watch:lint": "node node_modules/eslint-watch/bin/esw -w",
    "test": "jest",
    "precommit": "lint-staged"
  },
  "lint-staged": {
    "*.js": [
      "node_modules/.bin/prettier --single-quote --trailing-comma es5 --write",
      "eslint",
      "git add"
    ]
  },
  "dependencies": {
    "axios": "^0.18.0",
    "firebase": "^4.13.1",
    "husky": "^0.14.3",
    "lint-staged": "^7.0.4",
    "prop-types": "^15.6.1",
    "react": "16.3.1",
    "react-native": "^0.52.2",
    "react-native-fetch-blob": "^0.10.8",
    "react-native-image-picker": "^0.26.7",
    "react-navigation": "^1.5.11",
    "react-redux": "^5.0.7",
    "recompose": "^0.27.0",
    "redux": "^4.0.0",
    "redux-logger": "^3.0.6"
  },
  "devDependencies": {
    "babel-eslint": "^8.2.3",
    "babel-jest": "22.4.3",
    "babel-preset-react-native": "4.0.0",
    "eslint": "^4.19.1",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-config-prettier": "^2.9.0",
    "eslint-plugin-import": "^2.11.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-react": "^7.7.0",
    "eslint-plugin-react-native": "^3.2.1",
    "eslint-watch": "^3.1.4",
    "jest": "22.4.3",
    "prettier": "^1.12.1",
    "react-test-renderer": "16.3.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

Answer 1

更新到 react-native@0.55.3 解决了这个问题