Question

我在一页上列出了“租户”。当我选择一个租户时，if显示此特定租户的数据。这是工作。但是，当我导航回租户列表并选择另一个租户时，它不会使用新的租户数据更新this.props。

我的租户详细信息页面

constructor(props) {
    super(props);
    this.state = {
      tenantData: {}
    };
  }

  componentDidMount() {
    this.getTenantID();
  }

  componentDidUpdate(prevProps) {
      // needs to be a unique value
      if (prevProps.tenantData.Email !== this.props.tenantData.Email) {
         this.getTenantID();
       }
  }

  getTenantID = async () => {
    const { navigation } = this.props;
    const tenantID = navigation.getParam('tenantID', '0');
    await this.props.getTenantByID(tenantID); // Wait for action to complete
    this.setState({
      tenantData: this.props.tenantData
    });
  };

我的动作

export const getTenantByID = (tID) => {
  return (dispatch) => {
    axios.get('http://myirent.com/rent/components/iRentApp.cfc', {
      params: {
        method: 'getTenantByTenant',
        tenantID: tID
      }
    }).then((response) => {
      const tenant = response.data.DATA[0];
        console.log(tenant);
      const getTenant = {
        FirstName: tenant[1],
        LastName: tenant[2],
        Email: tenant[5],
        Phone: tenant[6],
        Unit: tenant[11],
        MiddleName: tenant[3],
        RentalAmount: tenant[4],
        MoveInDate: getFormattedDate(tenant[7]),
        MoveOutDate: getFormattedDate(tenant[8]),
        LeaseStartDate: getFormattedDate(tenant[9]),
        LeaseEndDate: getFormattedDate(tenant[10])
      };
      dispatch({
        type: GET_TENANT_DATA,
        payload: getTenant
      });
    });
  };
};

tenantID正在更新，动作响应数据也在更新中。在更新this.props.tenantData

之前，页面似乎正在加载

Answer 1

在更新后立即调用componentDidUpdate()。第一次渲染时不会调用此方法。

componentDidUpdate(prevProps) {
      // typical use cases (don't forget the props comparison)
      if (prevProps.navigation !== this.props.navigation) {
         const data = this.props.navigation.getParam('tenantID', '0')
         this.getTenantID(data);
       }
  }

  getTenantID = async () => {
    const { navigation } = this.props;
    const tenantID = navigation.getParam('tenantID', '0');
   const tenantdata = await this.props.getTenantByID(tenantID); // Wait for action to complete
    this.setState({
      tenantData: tenantdata,
      updateid : tenantID
    });
  };

React Native导航不更新道具

1 个答案: