Question

在输入字段中输入文本并单击提交按钮后发生错误：未捕获TypeError：dispatch不是函数在onSubmit

连接状态和道具似乎是正确的。

可能出现什么问题？

  */TODOLIPUT*/
import React from 'react'
import { connect } from 'react-redux'
import {addTodo} from '../actions/index'
import {bindActionCreators} from 'redux'


let AddTodo = ({ dispatch }) => {
  let input

    return (
    <div>
      <form onSubmit={e => {
        e.preventDefault()
        if (!input.value.trim()) {
          return
        }
        dispatch(addTodo(input.value))
        input.value = ''
      }}>
        <input ref={node => {
          input = node
        }} />
        <button type="submit">
          Add Todo
        </button>
      </form>
    </div>
  )
}

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

function matchDispatchToProps(dispatch){
    return bindActionCreators({addTodo: addTodo}, dispatch);
}

export default connect(mapStateToProps, matchDispatchToProps)(AddTodo)

/*TODOLIST*/
import React from 'react';
import {Todo} from './todo';
import { connect } from 'react-redux'
import {bindActionCreators} from 'redux'

const TodoList = ({ todos, onTodoClick }) => (
  <ul>
    {todos.map(todo =>
      <Todo {...todo} />
    )}
  </ul>
)

function mapStateToProps(state) {
    return {
        todos:state.todos
    }
}

export default connect(mapStateToProps, null)(TodoList)



/* REDUCER */
import {combineReducers} from 'redux';


export const reducers = combineReducers({
    todos:todos
})



export function todos(state=[], action) {
    switch(action.type) {
        case 'ADD_TODO':
            return [
                ...state,
                {
                    text:text,
                    completed:false
                }
            ]
        default:
        return state
    }
} 

*/ACTION*/
export const addTodo = (text) => {
  return {
    type: 'ADD_TODO',
    text
  }
}

Answer 1

您不需要使用dispatch，因为您在bindActionCreators中使用了mapDispatchToProps。

bindActionCreators是一个助手，可让动作创建者直接发送动作。因此，您只需调用您的操作创建者，它就会自动发送操作。

您可以使用dispatch而不是mapDispatchToProps，也可以使用mapDispatchToProps注入的道具，而不是dispatch。这就是mapDispatchToProps以这种方式调用的原因 - 它允许您根据调度定义其他一些道具，因此您不需要再次使用它。

请检查：https://github.com/reactjs/react-redux/blob/master/docs/api.md#examples

Answer 2

您可以进行两项更改以使代码正常运行。

首先：如果您在组件中使用dispatch，则无需使用mapDispatchToProps，因为默认情况下connect <将向您发送调度/ p>

export default connect(mapStateToProps)(AddTodo)

第二：另一种方法是使用bindActionCreators绑定您的动作创建者进行调度，因此组件中不需要单独的调度事件

let AddTodo = (props) => {
  let input

    return (
    <div>
      <form onSubmit={e => {
        e.preventDefault()
        if (!input.value.trim()) {
          return
        }
        props.addTodo(input.value);
        input.value = ''
      }}>
        <input ref={node => {
          input = node
        }} />
        <button type="submit">
          Add Todo
        </button>
      </form>
    </div>
  )
}

还有一件事，因为您在{dispatch}参数中将道具解析为AddTodo，您将无法访问todos州。

＆＃34; dispatch不是onSubmit＆＃34;点击提交按钮后

2 个答案: