状态已更改，但组件未重新呈现。

Question

我是新的反应本机，我现在用它来构建一个应用程序。我今天发现了两个问题，如果有人能帮我理解这些问题，我会很有帮助和感激。

在这个应用程序中，我使用react native + Expo + redux + react-native-elements(一个组件库)+react-native-debugger(调试反应-本机和redux)。

第一个问题(已解决)：

在我的Auth.js中，我希望呈现一个按钮，按钮的字符串取决于状态的一个切片。

class Auth extends Component{
  constructor(props){
    super(props);
  }

  // Why this not work???
  // renderBtn(){
  //   btnString = this.props.isLoginPage?"Log In":"Sign Up";
  //   return(
  //     <Button
  //         title={btnString}
  //         big
  //         backgroundColor="#64B5F6"
  //         onPress={this.props.onAuth}
  //       />
  //   )
  // }

  //this works well
  renderBtn(){
    if (this.props.isLoginPage) {
      return(
        <Button
          title="Log In"
          big
          backgroundColor="#64B5F6"
          onPress={this.props.onAuth}
        />
      );
    }

      return(
        <Button
          title="Sign Up"
          big
          backgroundColor="#64B5F6"
          onPress={this.props.onAuth}
        />
      );
  }

...

  render(){
    return(
      <View>
      ...

        {this.renderBtn()}

      ...

      </View>

    )
  }
}
//map isLoginPage from state to props
const mapStateToProps = ({auth}) => {
  const {emailErrorMsg,passwordErrorMsg,email,password,isLoginPage,isLoading} = auth;
  return {emailErrorMsg,passwordErrorMsg,email,password,isLoginPage,isLoading};
}

export default connect(mapStateToProps,{
  onPasswordChanged,
  onEmailChanged,
  onAuth,
  onSwitchAuthType
})(Auth);

如前所述，我希望使用this.props.isLoginPage来确定显示哪个字符串。"isLoginPage“是使用react-redux映射到组件支持的状态片段。

当我单击一个按钮来反转isLoginPage时，调试器显示它已经改变了，但是我注释的函数renderBtn()不起作用，它只是没有响应，下面的renderBtn()很好用。

按钮组件来自react-native-elements。

我想知道为什么会发生这种情况，如果有任何文件将是非常有帮助的。

‘Sencond问题：

在AuthReducer.js (由上面的Auth.js使用)中，.I想要逆转isLoginPage

import {PASSWORD_CHANGE,EMAIL_CHANGE,SWITCH_AUTH_TYPE,AUTH_START} from '../Type';

const INIT_STATE = {
  isLoginPage:false,

  isLoading:false,
  email:'',
  password:'',
  emailErrorMsg:'',
  passwordErrorMsg:'',
};


export default (state = INIT_STATE, action)=>{
  switch(action.type){
    case EMAIL_CHANGE:
      return {...state, email:action.payload};
    case PASSWORD_CHANGE:
      return {...state, password:action.payload};

    case SWITCH_AUTH_TYPE:
      //Why this not work???
      //return {...state, isLoginPage:!state.isLoginPage}
      const newIsLogin = !state.isLoginPage;
      return {...state,isLoginPage:newIsLogin};

    case AUTH_START:
      return {...state,isLoading:true};
    default:
      return state;
  }
}

我注释了不工作的代码( isLoginPage值没有改变，通过react-native-debugger)，下面的代码运行良好。看起来完全一样。我不明白，我和ES6有任何联系

Answer 1

您刚刚错过了声明变量，应该是

let btnString = this.props.isLoginPage?"Log In":"Sign Up";

对于ESLint，应该是：

let btnString = this.props.isLoginPage ? 'Log In' : 'Sign Up';