如何修复react-native中的许多重新渲染错误

时间:2019-12-14 03:35:05

标签: reactjs react-native expo

一般来说,我在响应本机和编码方面都相当陌生,今天我遇到了一个问题,即重新渲染过多。 React限制了渲染次数,以避免无限循环,请帮忙。

这是App.js文件,它表明错误位于错误消息中-

import React from "react";
import { createAppContainer, createSwitchNavigator } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import { createBottomTabNavigator } from "react-navigation-tabs";
import AccountScreen from "./src/screens/AccountScreen";
import CreateScreen from "./src/screens/CreateScreen";
import HomeScreen from "./src/screens/HomeScreen";
import ItemDetailScreen from "./src/screens/ItemDetailScreen";
import SigninScreen from "./src/screens/SigninScreen";
import SignupScreen from "./src/screens/SignupScreen";
import { Provider as AuthProvider } from "./src/context/AuthContext";
import { setNavigator } from "./src/navigationRef";

const switchNavigator = createSwitchNavigator({
  loginFlow: createStackNavigator({
    Signup: SignupScreen,
    Signin: SigninScreen
  }),
  mainFlow: createBottomTabNavigator({
    itemListFlow: createStackNavigator({
      Home: HomeScreen,
      ItemDetail: ItemDetailScreen
    }),
    Create: CreateScreen,
    Account: AccountScreen
  })
});

const App = createAppContainer(switchNavigator);

export default () => {
  return (
    <AuthProvider>
      <App 
        ref={navigator => {
          setNavigator(navigator)
        }}
      />
    </AuthProvider>
  );
};

这是AuthProvider来自的AuthCOntext文件-

import { AsyncStorage } from "react-native";
import createDataContext from "./createDataContext";
import sellerApi from "../api/seller";
import { navigate } from "../navigationRef";

const authReducer = (state, action) => {
  switch (action.type) {
    case "add_error":
      return { ...state, errorMessage: action.payload };
    case "signup":
      return { errorMessage: "", token: action.payload };
    case "signin":
      return { errorMessage: "", token: action.payload };
    case "clear_error_message":
      return { ...state, errorMessage: "" };
    default:
      return state;
  }
};

const tryLocalSignin = dispatch => async () => {
  const token = await AsyncStorage.getItem("token");
  if (token) {
    dispatch({ type: "signin", payload: token });
    navigate("Home");
  } else {
    navigate("loginFlow");
  }
};

const clearErrorMessage = dispatch => {
  dispatch({ type: "clear_error_message" });
};

const signup = dispatch => async ({ name, phone, email, password }) => {
  try {
    const response = await sellerApi.post("/api/users", {
      name,
      phone,
      email,
      password
    });
    //this is the other place the error might be happening i need this to save in the phone local storage
    await AsyncStorage.setItem("token", response.data);
    console.log(response.data);
    dispatch({ type: "signup", payload: response.data.token });

    navigate("Home");
  } catch (err) {
    dispatch({ type: "add_error", payload: "FAIL" });
  }
};

const signin = dispatch => async ({ email, password }) => {
  try {
    const response = await sellerApi.post("/api/auth", {
      email,
      password
    });
    await AsyncStorage.setItem("token", response.data);
    console.log(response.data);
    dispatch({ type: "signin", payload: response.data.token });

    navigate("Home");
  } catch (err) {
    dispatch({ type: "add_error", payload: "FAIL" });
  }
};
const signout = dispatch => {
  return () => {};
};

export const { Provider, Context } = createDataContext(
  authReducer,
  { signup, signin, signout, clearErrorMessage, tryLocalSignin },
  { token: null, errorMessage: "" }
);

请帮助我很困惑。

0 个答案:

没有答案