Question

我想将如下所示的动作作为道具传递给组件，但是这样做会出错。

这似乎很好：

import React, { useState, useEffect, useContext } from 'react';
import MyScheduleDispatch from './MyScheduleContext'


export default function generateShowItem({action}) {

  const dispatch = useContext(MyScheduleDispatch);

  const [isIconSolid, setIsIconSolid] = useState(false)

  function handleIconOnClick() {
    setIsIconSolid(!isIconSolid)
  }

  useEffect(() =>
    {
      if(isIconSolid) dispatch({ type: action, payload: item })
    },
    [isIconSolid]
  )

  const emptyIcon = <StarIconBorder onClick={handleIconOnClick} className={classes.star}></StarIconBorder>
  const solidIcon = <StarIconSolid onClick={handleIconOnClick} className={classes.star}></StarIconSolid>




  return (
    <div style={{position: 'relative'}} key={index}>
      {isIconSolid ? solidIcon : emptyIcon }
    </div>
  )
}

但是当我尝试通过操作时（上面硬编码为"addItem"，它会引发错误

 useEffect(() =>
{
  if(isIconSolid) dispatch({ type: props.action, payload: item })
},
[isIconSolid]
)

错误：

Schedule.js:30 Uncaught Error
    at myScheduleReducer (Schedule.js:30)
    at updateReducer (react-dom.development.js:13247)
    at Object.useReducer (react-dom.development.js:13828)
    at useReducer (react.development.js:1467)
    at Schedule (Schedule.js:34)
    at renderWithHooks (react-dom.development.js:12939)
    at updateFunctionComponent (react-dom.development.js:14628)
    at beginWork (react-dom.development.js:15638)
    at performUnitOfWork (react-dom.development.js:19313)
    at workLoop (react-dom.development.js:19353)
    at renderRoot (react-dom.development.js:19436)
    at performWorkOnRoot (react-dom.development.js:20343)
    at performWork (react-dom.development.js:20255)
    at performSyncWork (react-dom.development.js:20229)
    at requestWork (react-dom.development.js:20098)
    at commitPassiveEffects (react-dom.development.js:18796)
    at wrapped (scheduler-tracing.development.js:207)
    at flushFirstCallback (scheduler.development.js:107)
    at flushWork (scheduler.development.js:219)
    at MessagePort../node_modules/scheduler/cjs/scheduler.development.js.channel.port1.onmessage (scheduler.development.js:611)

注意：我知道Redux与此类似，并使用“连接”将派遣映射到道具，也许它与沿这些路线的某些事情有关。（只是一个想法）

https://react-redux.js.org/using-react-redux/connect-mapdispatch

Answer 1

尝试像这样const {dispatch} = useContext(myScheduleDispatch)

进行销毁

传递动作以调度React Hooks

1 个答案: