0
私はReact Nativeにかなり新しいです。私は条件付きのリアクションナビゲーションレンダリングを使用して認証フローを作成しました。これはエラーを出すこととは別に動作します。私は競合状態によって引き起こされると信じています。ユーザーがサインインしているかどうかをチェックし、それが基準であるかどうかに基づいてレンダリングするとどうなりますか。しかし、ユーザーが既にログインしている場合は、LoginScreenのレンダリングを開始し、ログインしていることを検出して再レンダリングを試み、次のエラーが発生します。React Native Redux条件付きLoggedInレンダリングによって競合状態が発生する
"警告：setStateこれは通常、アンマウントされたコンポーネントに対してsetState（）を呼び出したことを意味します。これはノーオペレーションです。アイコンコンポーネントのコードを確認してください。
私の主なコンポーネントは次のようになります。：LoginScreenがどのように見える
import React, { Component } from "react";
import { TabNavigator, StackNavigator } from "react-navigation";
import Tasks from "../screens/Tasks";
import Home from "../screens/Home";
import Message from "../screens/Message";
import Profile from "../screens/Profile";
//import WelcomeScreen from "../screens/WelcomeScreen";
import PhoneContacts from "../screens/PhoneContacts";
import { SimpleLineIcons } from "@expo/vector-icons";
import LoginScreen from "../containers/LoginScreen";
const InviteNavigator = StackNavigator({
DeathMessage: { screen: Message },
PhoneContacts: { screen: PhoneContacts }
});
export const SignedIn = TabNavigator({
Tasks: {
screen: Tasks,
navigationOptions: {
tabBarIcon: ({ tintColor }) =>
<SimpleLineIcons name="list" size={30} />
}
},
Home: {
screen: Home,
navigationOptions: {
tabBarIcon: ({ tintColor }) =>
<SimpleLineIcons name="home" size={30} />
}
},
Message: {
screen: InviteNavigator,
navigationOptions: {
tabBarIcon: ({ tintColor }) =>
<SimpleLineIcons name="envelope-letter" size={30} />
}
},
Profile: {
screen: Profile,
navigationOptions: {
tabBarIcon: ({ tintColor }) =>
<SimpleLineIcons name="user" size={30} />
}
}
});
export const SignedOut = StackNavigator({
SignIn: {
screen: LoginScreen,
navigationOptions: {
title: "Sign In"
}
}
});ようNAVは見え
import React, { Component } from "react";
import { StyleSheet, Text, View, AsyncStorage } from "react-native";
import { connect, Provider } from "react-redux";
import Reactotron from "reactotron-react-native";
import { logIn } from "../actions";
import { SignedIn, SignedOut } from "../components/Nav";
import { isSignedIn } from "../components/Auth";
import LoginScreen from "../containers/LoginScreen";
class RootApp extends Component {
async checkSignedIn() {
res = await isSignedIn();
if (res != false) {
expires = String(res.expires);
this.props.logIn(res.fbToken, expires);
} else {
console.log("Not logged in");
}
}
async componentWillMount() {
await this.checkSignedIn();
}
render() {
if (this.props.auth.signedIn == true) {
return <SignedIn />;
} else {
return <SignedOut />;
}
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
fontSize: 96
}
});
const mapStateToProps = state => {
return {
auth: state.auth
};
};
const mapDispatchToProps = dispatch => {
return {
logIn: fbToken => {
dispatch(logIn(fbToken, expires));
}
};
};
export default connect(mapStateToProps, mapDispatchToProps)(RootApp);import { connect } from "react-redux";
import React, { Component } from "react";
import {
Button,
View,
Text,
ActivityIndicator,
Alert,
FlatList
} from "react-native";
import { NavigationActions } from "react-navigation";
import { SocialIcon, Card } from "react-native-elements";
import Reactotron from "reactotron-react-native";
import { AsyncStorage } from "react-native";
import { logIn } from "../actions";
import { signIn } from "../components/Auth";
class SignIn extends Component {
async handleClick() {
res = await signIn();
if (res.type == "success") {
expires = String(res.expires);
AsyncStorage.setItem("fbToken", res.token);
AsyncStorage.setItem("expires", expires);
this.props.logIn(res.token, expires);
} else {
console.log("Login Failed");
}
}
render() {
return (
<View style={{ paddingVertical: 20 }}>
<Card title="finis Requires A Facebook Account To Operate">
<SocialIcon
title="Fred"
button
type="facebook"
onPress={() => this.handleClick()}
/>
</Card>
</View>
);
}
}
const mapDispatchToProps = dispatch => {
return {
logIn: fbToken => {
dispatch(logIn(fbToken, expires));
}
};
};
LoginScreen = connect(null, mapDispatchToProps)(SignIn);
export default LoginScreen;任意の助けいただければ幸いです。適切な方向に指されていれば、完全に再設計するのは幸いです。
？ –
今すぐソートされました。ありがとう –