用USECONTEXT的USEDUCER集成未正确更新

Question

我学习与打字稿有关的本地反应。我目前正在尝试使用UserEducer funtion从“组件树”下方的组件中消耗上下文。还原器似乎工作正常，返回预期值，但是上下文根本不会更新。 我一直在遵循一门课程，此确切的代码似乎对老师有用。我不知道我的错误可能在哪里。

这是我的代码：

authcontext.tsx

export interface AuthState {
  isLoggedIn: boolean;
  userName?: string;
  favoriteIcon?: string;
}

const authInit: AuthState = {
  isLoggedIn: false,
};

export interface AuthContextProps {
  authState: AuthState;
  signIn: () => void;
}
export const AuthContext = createContext({} as AuthContextProps);

export const AuthProvider = ({
  children,
}: {
  children: JSX.Element | JSX.Element[];
}) => {
  const [authState, dispatch] = useReducer(authReducer, authInit);

  const signIn = () => {
    dispatch({type: 'signIn'});
  };

  return (
    <AuthContext.Provider
      value={{
        authState: authInit,
        signIn,
      }}>
      {children}
    </AuthContext.Provider>
  );
};

authreducer.tsx

interface AuthAction {
  type: 'signIn';
}

export function authReducer(state: AuthState, action: AuthAction): AuthState {
  switch (action.type) {
    case 'signIn':
      let newstate = {
        ...state,
        isLoggedIn: true,
        userName: 'marrkoz',
      };
      //this console.log is running okay
      console.log(newstate);
      return newstate;
      break;
    default:
      return state;
  }
}

app.jsx

const App = () => {
  return (
    <NavigationContainer>
      <AppState>
        <BottomTabsNavigator />
      </AppState>
    </NavigationContainer>
  );
};

// i dont understand why this wrapper is necesary...
const AppState = ({children}: {children: JSX.Element | JSX.Element[]}) => {
  return <AuthProvider>{children}</AuthProvider>;
};

export default App;

在这里，我尝试每次消耗控制台按钮logs'{isloggedin：false}'。 组件层次结构是以下应用程序＆gt;底部tabnavigator＆gt; Toptabnavigator＆gt; contacts.tsx

contacts.tsx

export const Contacts = () => {
  const {authState, signIn} = useContext(AuthContext);
  return (
    <>
      <View>
        <Text>Contacts</Text>
      </View>
      <View style={styles.m20}>
        <Button title={'sign in'} onPress={signIn} />
        <Button
          title={'console'}
          onPress={() => {
            console.log(JSON.stringify(authState));
          }}
        />
      </View>
    </>
  );
};

我唯一的猜测是，还原器返回值不链接到上下文，因此上下文不是“采用”新状态作为当前状态。如果是这样，我不知道如何解决

Answer 1

在您的提供商中，您正在通过Authinit而不是Authstate。

请更改

value={{
        authState: authInit, // <---
        signIn,
      }}

为

value={{
        authState, // <---
        signIn,
      }}