时间戳

首页 > 解决方案 > toggleGot 不是函数

javascript - toggleGot 不是函数

问题描述

当我按下 TouchableOpacity 时，我得到一个错误'toggleGot 不是一个函数。（在“toggleGot（todo.id）”中，“toggleGot”未定义）错误

当 onPress 它应该在真假之间切换 .got:。

我无法找到问题，我查看了代码的其他区域，一切似乎都井井有条。我想知道它是否与两次传递 todo.id 有关。我是否应该从中制作两个组件并导入？想明白不只是解决。

我检查了每一点，寻找拼写错误语法错误，忘记导入。我闻不出来。我只是好奇错误是否如我所料。我在其他地方寻找语法错误。我只是在想，也许这里有一条规则我缺少关于绑定我缺少的这种冲突的规则。

// COMPONENT
const TodoList = ({todos, toggleTodo, toggleGot}) => (
    <View style={{ padding: 20, flexDirection: 'column' }}>
        {todos.map(todo => 
            <TouchableOpacity key={todo.id} onPress={() => 
                toggleTodo(todo.id)}>
                <View style={{flexDirection: 'row'}}>
                    <Text style={{
                        fontSize: 24,
                        backgroundColor: 'rgba(0,0,0, .02)',
                        borderRadius: 10,
                    }}>
                        {todo.text}  {' '}
                    </Text>
                    <Text style={{
                        fontSize: 14,
                        textAlignVertical: 'center',
                    }}>
                        {todo.amount}
                        {todo.measure}
                    </Text>
                    <TouchableOpacity key={todo.id} onPress={() => 
                        toggleGot(todo.id)}>
                        <Ionicons 
                            name="md-checkmark" 
                            size={12} 
                            style={{color: '#de9595', padding: 10 }} 
                        />
                    </TouchableOpacity>

                </View>
                    {
                        todo.completed ? todo.note : null
                    }
                </Text> 
            </TouchableOpacity>
        )}
    </View>
)


// ACTIONCREATOR

export const toggleTodo = (id) => ({
    type: TOGGLE_TODO,
    id,
})

export const toggleGot = (id) => ({
    type: TOGGLE_GOT,
    id,
})

// REDUCER
let nextId = 0;
const todos = (state = [], action) => {
    switch(action.type){
        case 'ADD_TODO':
            return[
                ...state,
                {
                    id: action.id,
                    text: action.text,
                    note: action.note,
                    amount: action.amount,
                    measure: action.measure,
                    completed: false,
                    got: false,
                }
            ]
        case 'TOGGLE_TODO':
            return state.map(
                todo => (todo.id === action.id)
                    ? {...todo, completed: !todo.completed }
                    : todo 
                )
        case 'TOGGLE_GOT':
            return state.map(
                todo => (todo.id === action.id)
                    ? {...todo, got: !todo.got}
                    : todo
            )
        default:
            return state
    }
}

export default todos;

预期结果：todo.got：在真假之间切换实际结果是上述错误。

标签： javascriptreact-native

解决方案

我想回答自己的机会（愚蠢的错误）（这是获得自学者徽章的机会，这是一线希望）

您必须发送操作。Reducer 将抓取动作和状态，但需要通过调度它来设置它。

将其添加到我的容器中。和作品。

const mapDispatchToProps = dispatch => ({
    toggleTodo: id => dispatch( toggleTodo(id) ),
    toggleGot: id => dispatch( toggleGot(id) ),
})

推荐阅读