0

我的切片中有这个动作：

setTimerState(state, { payload }: PayloadAction<{ timer: StepTimer, timerState: CookingTimerState }>) {
  const { timer, timerState } = payload
  state.stepTimers
    .find(t => t.timerId === timer.timerId)!
    .state = timerState
}

我已经编写了我的mapDispatch操作，以便我可以在我的组件中非常简单地调用它：

type Props = {
  timer: StepTimer
  startTimer?: any // FIXME
};

const StepTimerComponent = ({ timer, startTimer }: Props) =>
  <StepTimerButton onClick={ startTimer }>
    { timer.label }  
  </StepTimerButton>

const actions = (dispatch: AppDispatch, { timer }: Props) => ({
  startTimer: () => dispatch(setTimerState({ timer, timerState: CookingTimerState.Running }))
})

const StepTimerContainer = connect(null, actions)(StepTimerComponent)
export default StepTimerContainer

这工作正常，但类型Props困扰我。它实际上应该是什么？

  1. 目前是可选的。如果我将其?设为非可选，我会从调用组件中收到一个 TS 错误：
Property 'startTimer' is missing in type '{ timer: StepTimer; key: number; }' but required in type 'Props'.  TS2741
    13 |     timers.length ? timers.map((timer, i) =>
  > 14 |       <StepTimerContainer timer={ timer } key={ i }/>
       |        ^
    15 |     ) : "No timers."

但是该函数不connect向包装的组件提供该道具吗？

  1. startTimer: any实际上应该是什么？？？我尝试了许多排列，它们要么从onClick类型中得到错误，要么更重要的是从connect调用的最终参数中得到错误。例如startTimer: PayloadAction<{timer: StepTimer, timerState: CookingTimerState}>得到这两个错误。（然后尝试onClick={ () => startTimer() }说这startTimer是不可调用的。

什么是正确的类型startTimer？

4

0 回答 0