Question

我尝试在我的React Native组件中使用新的getDerivedStateFromProps生命周期方法，但该方法永远不会被调用。我已经尝试过查找，但在反应本机回购中找到了no issues。 StackOverflow或Google也没有结果。

我找到的是一个reddit thread和一个StackOverflow issue，它们都引用了更新react-dom作为解决方案，但在这种情况下无效，因为没有dom in React Native。

任何人都可以确认这种方法是否可以在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解决了这个问题

在React Native中没有调用getDerivedStateFromProps

1 个答案: