Question

在主屏幕中，我有一个函数可以从API获取“用户类型：已付费/未付费”，

因此，在此屏幕中，我内部有一个抽屉，用户可以浏览以登录屏幕，因此在用户登录后，我可以将其导航回主屏幕

但是在这种情况下，已经安装了主屏幕，这意味着第一次已经调用了userIsPaid函数，因此我想重新检查是否已向该帐户付款，请再次“调用userisPaid（）”？

因为在“底部标签”中，我根据用户类型有条件地呈现了一个新标签，但由于我没有重新检查用户类型，因此它无法正常工作。

代码

Root.js

const BottomTabStack = createBottomTabNavigator();
function BottomTabs() {
  const isPaid = useSelector(state => state.userIsPaid.isPaid);

...
 <BottomTabStack.Navigator
      lazy={false}
      tabBar={props => <TabBar {...props} />}
      >
...
 {isPaid && (
        <BottomTabStack.Screen
          name="Library"
          component={YourLibraryStackScreen}
        />
      )}
    </BottomTabStack.Navigator>
}

Home.js

  userIsPaid = async () => {
    try {
      const {token} = this.props;
      let AuthStr = `Bearer ${token}`;
      let response = await API.get('/profile', {
        headers: {Authorization: AuthStr},
      });
      const {account} = response.data.data;
      console.log('account??', account);
      account === 'unpaid'
        ? this.props.isUserPaid(false)
        : this.props.isUserPaid(true);
    } catch (err) {
      console.log(err);
    }
  };

componentDidMount() {
    const {token} = this.props;
    token && this.userIsPaid();
 }

SignIn.js

  sendData = async data => {
    // this.setState({loading: true});
    try {
      let response = await API.post('/google', data);
      // this.setState({loading: false});
      let {
        data: {
          data: {
            response: {token},
          },
        },
      } = response;

      this.props.dispatch(saveToken(token));
      this.props.dispatch(isLoginFunc(true));
      this.props.navigation.push('BottomTabNavigator'); // bottom navigation 'home,about....'
    } catch (err) {
      console.log(err);
    }
  };

Answer 1

使用shouldComponentUpdate()生命周期方法可能很有用。使用shouldComponentUpdate()让React知道组件的输出是否不受 state 或 props 中当前更改的影响。默认行为是在每个状态更改时重新呈现，并且在大多数情况下，您应该依赖默认行为。

当接收到新的 props 或 state 时，会在渲染之前调用

shouldComponentUpdate()。默认为true。初始渲染或使用forceUpdate()时不会调用此方法。

屏幕安装后如何调用函数？

1 个答案: