Question

我一直在调试这个程序，但没有任何线索，我一个接一个地跟着this教程尝试制作一个TODO应用程序，但我无法弄清楚为什么我收到此错误消息。

./ SRC / containers.js
  第12行：'dispatch'未定义no-undef
  第13行：'dispatch'未定义no-undef

components.js

ios-deploy : 1.9.1 
ios-sim    : 6.0.0 
Node       : v6.10.2
npm        : 3.10.10 
OS         : macOS Sierra
Xcode      : Xcode 8.3.1 Build version 8E1000a

containers.js

import React from 'react'

class Todo extends React.Component {

    render() {
        const { todo } = this.props

        if (todo.isDone) {
            return <strike>{todo.text}</strike>
        } else {
            return <span>{todo.text}</span>
        }
    }
}

export default class TodoList extends React.Component {
    render() {

        const {todos, toggleTodo, addTodo } = this.props
        console.log(toggleTodo)

        return (
            <div className="todo">
                <input type="text" placeholder="Add todo"/>
                <ul className='todo__list'>
                    {todos.map(t => (
                    <li key={t.id} className='todo__item'>
                        <Todo todo={t} />
                    </li>
                    ))}
                </ul>
            </div>
        )
    }
}

reducers.js

import * as components from './components.js'
import { addTodo, toggleTodo } from './actions.js'
import { connect } from 'react-redux'

const mapStateToProps = (state) => {
    return {todos: state}
}

const mapDispatchToProps = (state) => {
    return {
        addTodo: text => dispatch(addTodo(text)),
        toggleTodo: id => dispatch(toggleTodo(id))
    }
}

const TodoList = connect(mapStateToProps, mapDispatchToProps)(components.TodoList)

export default TodoList

index.js

const reducer = (todos = [], action) => {
    switch(action.type) {
        case 'ADD_TODO': {
            return [...todos, {id: action.id, text: action.text, completed: false}]
        }
        case 'TOGGLE_TODO': {
            return todos.map(todo => todo.id === action.id ? {...todo, completed: !todo.completed} : todo)
        }

        default: {
            return todos
        }
    }
}

export default reducer

Answer 1

而不是在这里陈述：

mapDispatchToProps = (state) =>

使用发送：

mapDispatchToProps = (dispatch) =>

在containers.js。

DOC:

容器组件可以调度操作。以类似的方式，你可以定义一个名为 mapDispatchToProps （）的函数来接收 dispatch（）方法并返回要注入的回调道具进入表达部分。

'dispatch'没有定义

1 个答案: