Question

我是Typescript的新手，在使用state和useContext挂钩时，变量useReducer出现以下错误：

输入'{state：{};派遣：派遣； }'不可分配给   输入'{latlng：null; searchTerm：null； bookingId：null; myPin：null；   selectedPin：null； selectedCard：null； selectedCardPin：null； }'。
  对象文字只能指定已知属性，而“ state”则不能   存在类型'{latlng：null; searchTerm：null； bookingId：null;   myPin：null； selectedPin：null； selectedCard：null； selectedCardPin：   空值; }'。ts（2322）

这是我的app.tsx：

const App = () => {   
  const initialState = useContext(Context)   
  const [state, dispatch] = useReducer(reducer, initialState)    
  return(
    <Context.Provider value={{ state // <-this is where the error occurs//, dispatch }}>
         ...
    </Context.Provider>    
  )

以下是我的context.jsx：

const Context = createContext({
    latlng: null,
    searchTerm: null,
    bookingId: null,
    myPin: null,
    selectedPin: null,
    selectedCard: null, 
    selectedCardPin: null,
})

修订：

根据建议，我已将“ context.tsx”更改为以下内容，但仍收到错误消息：

'{latlng类型的参数：null; searchTerm：null； bookingId：null;   myPin：null； selectedPin：null； selectedCard：null； selectedCardPin：   空值; }”不能分配给“ MyContextType”类型的参数。
  对象文字只能指定已知属性，而“ latlng”可以   类型“ MyContextType”中不存在。ts（2345）

import { createContext } from 'react'

interface MyContextType {
    dispatch: React.Dispatch<any>,
    state: {
      latlng?: any,
      searchTerm?: any,
      bookingId?: any,
      myPin?: any,
      selectedPin?: any,
      selectedCard?: any, 
      selectedCardPin?: any,
    }
}

const Context = createContext<MyContextType>({
    latlng: null,
    searchTerm: null,
    bookingId: null,
    myPin: null,
    selectedPin: null,
    selectedCard: null, 
    selectedCardPin: null,
})

export default Context

第二次修订：

当我更改context.jsx以匹配createContext的内容时，如下所示：

interface MyContextType {
    latlng?: any,
    searchTerm?: any,
    bookingId?: any,
    myPin?: any,
    selectedPin?: any,
    selectedCard?: any, 
    selectedCardPin?: any,
}

const Context = createContext<MyContextType>({
    latlng: null,
    searchTerm: null,
    bookingId: null,
    myPin: null,
    selectedPin: null,
    selectedCard: null,
    selectedCardPin: null,
})

该错误在context.jsx中消失了，但是在app.jsx中导致类型错误。

输入'{state：{};派遣：派遣； }'不可分配给键入“ MyContextType”。对象文字只能指定已知属性，并且类型中不存在“状态” 'MyContextType'.ts（2322）

    <Context.Provider value={{ state //<-- here //, dispatch }}>
    </Context.Provider>

Answer 1

在将prop传递给Store.Provider时添加'as type'，它可以解决此错误。像这样：

const [state, dispatch] = React.useReducer(reducer, initialState);
const value = { state, dispatch };
return <Store.Provider value={value as MyContextType}>{props.children}</Store.Provider>;

让我知道这是否可以解决您的问题。

使用React useContext和useReducer时出现打字稿错误

1 个答案: