【问题标题】:Error In Reducer . initialState . How i can initialize state and use action.type减速器中的错误。初始状态。我如何初始化状态和使用 action.type
【发布时间】:2021-04-05 20:37:19
【问题描述】:

我正在尝试设置登录用户。使用减速机。 错误是:

意外的令牌 && 语法错误

线路开关错误(action.type) 或括号中的错误没有正确关闭我不知道
要么在 reducer 初始化和 initialState 中使用 : 要么 =

StackOverflow :看起来您的帖子主要是代码;请添加更多详细信息。

我:我有足够的细节我分享了????我不知道比上面更多

 import React from 'react';
    import {View, StyleSheet, Text} from 'react-native';
    import {NavigationContainer} from '@react-navigation/native';
    import {createStackNavigator} from '@react-navigation/stack';
    import { AuthStackNavigator } from './navigators/AuthStackNavigator';
    import { AuthContext } from './context/AuthContext';
    import  axios  from "axios";
    import { BASE_URL } from './config';
    import { sleep } from './utils/sleep';
    import { createAction } from './utils/createAction';
    const RootStack = createStackNavigator();
    
    export default function ()
    {
      
      const [ state, dispatch ] = React.useReducer(
        reducer : ( state: { user: * }, action ) =>
        {
          switch ( action.type )
          {
            case 'SET_USER':
              return {
                ...state,
                user: { ...action.payload },
              };
            default:
              return state;
          }
        },
        initialState : {
          user: undefined,
        }
      );
    
      const auth = React.useMemo( () => ( {
    
        login: async (email,password) =>
        {
              
    const options = {
      method: 'post',
      url: `${BASE_URL}/auth/local`,
      data: {
        identifier: email,
        email,
        password,
      },
      transformResponse: [
        (data) => {
          // transform the response
          return data;
        },
      ],
    };
    await sleep(2000);
    
    // send the request
    const {data}= axios( options );
    
          const user = {
            email: data.user.email,
            token: data.jwt,
          };
       dispatch(createAction(type:'SET_USER',user))
        },
    
    
        logout: () =>
        {
          console.log( 'logout' );
        },
    
    
        register:async (email,password) =>
        {
    const options = {
      method: 'post',
      url: `${BASE_URL}/auth/local/register`,
      data: {
        user: email,
        email,
        password,
      },
      transformResponse: [
        (data) => {
          // transform the response
    
          return data;
        },
      ],
    };
    await sleep(2000);
    
    // send the request
        
    
    
          // console.log( 'register' );
          // await axios.post(url:`${BASE_URL}/auth/local/register`, data:{
          //   username: email,
          //   email,
          //   password,
          // } );
        },
      } ),
      );
    
    
    console.log(state.user)
    
      return (
        <AuthContext.Provider value={auth}>
          <NavigationContainer>
            <RootStack.Navigator screenOptions={ { headerShown: false } }>
              <RootStack.Screen name={ 'AuthStack' } component={ AuthStackNavigator } />
            </RootStack.Navigator>
          </NavigationContainer>
        </AuthContext.Provider>
      );
    }
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
      },
    });

【问题讨论】:

  • 可能是错字?删除 useReducer 钩子中减速器函数前面的“减速器:”。也不清楚{ user: * } 是关于什么的。您是在尝试提供 some 初始状态还是什么? “初始状态”将是传递给 useReducer 的第二个参数。
  • 感谢@DrewReese 我现在在下面的行中删除reducer 错误,这里的initialState 在这里设置了initialState : { user: undefined, },错误是:类型转换表达式应该用括号括起来
  • 啊,可能还想删除“initialState :”,它不是有效的javascript。
  • 好的。那么如何设置initialState呢?
  • 你读过useReducer 的官方react 文档吗?您的初始状态只是传递给useReducer 挂钩的第二个参数。 IE。 const [state, dispatch] = React.useReducer(reducerFunction, initialStateObject);.

标签: reactjs reducers use-reducer


【解决方案1】:

如果我理解您的错误并正确发出问题,它似乎与您尝试定义 useReducer 挂钩参数的方式有关。您似乎正在尝试定义对象键,但您没有定义对象。 useReducer 钩子函数最多只使用 3 个参数。

useReducer

const [state, dispatch] = useReducer(reducer, initialArg, init);

通常你只需要前两个,即你的 reducer 函数和初始 reducer 状态值。您可以在文档中进一步了解延迟初始化的第三个参数。

const [state, dispatch] = React.useReducer(
  (state, action ) => { // <-- reducer function
    switch (action.type) {
      case 'SET_USER':
        return {
          ...state,
          user: { ...action.payload },
        };
      default:
        return state;
    }
  },
  { user: undefined }, // <-- initial state object value
);

【讨论】:

  • 现在调度出错(createAction( type: 'SET_USER', user ) );
  • 这是我的操作方法:export function createAction(type,payload) { return { type, payload, }; }
猜你喜欢
  • 2019-05-08
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-12-21
  • 1970-01-01
  • 1970-01-01
  • 2019-05-11
  • 2020-05-10
相关资源
最近更新 更多