typescript useReducer的initialState类型为“从不”？

0g0grzrc 于 2022-12-27 发布在 TypeScript

关注(0)|答案(4)|浏览(106)

初始状态出现错误：* * 类型为"{电子邮件：字符串;密码：字符串;有效：布尔值;"}"不能赋给类型为" never "的参数。ts（2345）**

function reducer(state: IState, action: IFluxAction) {
  const Users = UsersFetch()
  switch (action.type) {
    case 'email':
      const email = action.value
      const valid = Users.find(e => e === email) ? true : false

      return {
        email,
        valid,
      }
    case 'password':
      const password = action.value
      return {
        password,
      }
    default:
      throw new Error()
  }
}

const initialState = {
    email: '',
    password: '',
    valid: false,
  }
  const [state, dispatch] = React.useReducer(reducer, initialState)

正确的输入方法是什么来消除这个错误？

- React16.8.1****打印脚本3.3.1**
- 应该（通过）**将...state添加到返回值中，例如

switch (action.type) {
    case 'email':
      const email = action.value
      const valid = Users.find(e => e === email) ? true : false

      return {
        ...state,
        email,
        valid,
      }
    case 'password':
      const password = action.value
      return {
        ...state,
        password,
      }
    default:
      throw new Error()
  }

此外，正如@madflanderz所建议的，将IState设置为reducer的预期返回值有助于捕获此类问题。

typescript

来源：https://stackoverflow.com/questions/54771003/usereducers-initialstate-is-typed-as-never

4条答案

按热度按时间

6gpjuf901#

我也在这个问题上挣扎过。在我看来，防止bug的最好方法似乎是添加State接口作为reducer的返回类型。然后，您会看到reducer内部的类型错误，而不是在useReducer行上。
像这样：

function reducer(state: IState, action: IFluxAction): IState {
   // reducer code
   // type errors are visible here 
}

赞(0）回复(0）举报 2022-12-27

h7wcgrx32#

这个问题很可能与reducer的声明有关。initialState的类型必须与reducer函数中的状态类型和返回值相同。
这将工作：

function reducer(state: {email: string}) {
  return state
}
const initialState = {
  email: '',
}
const [state, dispatch] = React.useReducer(reducer, initialState)

这将产生一个错误：

// state has a different type than initialState.
function reducer(state: {address: string}) {
  // No return statement.
}
const initialState = {
  email: '',
}
const [state, dispatch] = React.useReducer(reducer, initialState) // Error

在React的类型中，你可以看到useReducer泛型函数总是期望initialState类型是ReducerState<R>类型，ReducerState<R>是一个条件类型，它试图推断正确的状态类型，如果失败，就返回到never。

赞(0）回复(0）举报 2022-12-27

axr492tv3#

谢谢，疯子！
我也遇到了同样的问题。在我的例子中，问题是我错过了键入reducer的返回值：

function reducer(state: IState, action: IFluxAction): IState /<- *Don't forget this!*/ {
   // reducer code
   // type errors are visible here 
}

赞(0）回复(0）举报 2022-12-27

9lowa7mx4#

保存数据的对象。

export interfaace IObject {
    object: IObject
}

用于监视它的状态。

export interface IObjectState {
  
}

可以执行的操作。

export interface IObjectActions {
    state: IObjectState
    payload: IObject
}

减速器。

const reducer = (state: IObjectState, action: IObjectAction) => {
...return state
};

请记住IObject和IObjectState是两个不同的接口。如果没有完整的代码，错误会显示您试图在reducers的第一个参数中传递默认的'IObject'。什么时候您应该正确地传递默认的'IObjectState'。我将尝试在下面粗略地说明。
错误：在此处将默认值作为IObject传递

↓
const reducer = (state: IObjectState, action: IObjectAction) => {
...return state
};

正确：在此处传递默认IObjectState

↓
const reducer = (state: IObjectState, action: IObjectAction) => {
...return state
};

希望这个有用。

赞(0）回复(0）举报 2022-12-27

我来回答

typescript useReducer的initialState类型为“从不”？

4条答案

相关问题

热门标签

最新问答