使用React钩子时出现TypeError-useReducer

时间:2018-11-21 04:48:00

标签: javascript reactjs react-hooks

enter image description here我尝试使用react钩子(useReducer)。我出错了

  

TypeError:Object(...)不是函数

我在这里附加了我的代码,并还附加了错误屏幕截图。

import React, { useReducer } from 'react';

function appReducer(state, action){
    switch(action.type){
        case 'add':
            return [
                ...state,
                {
                    id:Date.now(),
                    text:'',
                    completed:false
                }
            ]
        break;
        default:
        break;
    }
}

export default function myCom(){
    const [state, dispatch] = useReducer(appReducer, []);
    return (
        <div className="App">
            <h5>React ToDo</h5>
            <button onClick={() => dispatch({type:'add'})}>New Todo</button>
            {
                state.map(item =>(
                    <div key={item.id}>{item.id}</div>
                ))
            }
        </div>
    );
}]

如何解决此错误。

1 个答案:

答案 0 :(得分:1)

该错误不是useReducer的错误,但是您错误地使用了导出默认值:

export default function myCom(){

如果要导出命名函数,则可以执行以下操作:

// function definition
function myComp() {}
// then export
export default { myComp }

然后您可以像这样使用

import Something from '...'
Something.myComp()

但是,如果您只想导出一个函数,那么我将其导出为:

export const myComp = () => {}

现在,您可以像这样导入:

import { myComp } from '...'
myComp()