Пройдите действие, чтобы отправить React Hooks - PullRequest
Новая
       9

Пройдите действие, чтобы отправить React Hooks

0 голосов
/ 10 июня 2019

Я хотел бы передать действие, как показано ниже, компоненту в качестве реквизита, но при этом получаю ошибку.

Это, кажется, работает нормально: 

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 похож на это и использует "connect" для сопоставления диспетчеризации с реквизитами, возможно, это связано с чем-то подобным ... (просто мысль)

https://react -redux.js.org / с использованием реагирующими-перевождь / подключения-mapdispatch

1 Ответ

0 голосов
/ 10 июня 2019

попробуй деструктурировать вот так const {dispatch} = useContext(myScheduleDispatch)

...