"dispatch is not a function at onSubmit" 点击提交按钮后

Question

在输入字段中输入文本并单击提交按钮后出现错误：Uncaught TypeError: dispatch is not a function 在提交

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

有什么问题吗？

  */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，因为您已经在 mapDispatchToProps 中使用了 bindActionCreators。

bindActionCreators 是一个使动作创建者能够直接调度动作的助手。因此，您只需调用您的动作创建器，它就会自动分派动作。

你可以使用dispatch而不通过mapDispatchToProps，或者你可以使用mapDispatchToProps注入的道具而不使用dispatch。这就是 mapDispatchToProps 被这样调用的原因——它让你可以根据 dispatch 定义一些其他的 props，这样你就不需要再次使用它了。

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

Answer 2

您可以进行两项更改以使您的代码正常工作。

首先：如果您在组件中使用dispatch，则无需使用mapDispatchToProps，因为默认情况下connect

export default connect(mapStateToProps)(AddTodo)

第二：另一种方法是使用 bindActionCreators 绑定你的 action creators 以进行调度，因此你的组件中不需要单独的调度事件

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>
  )
}

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

"dispatch is not a function at onSubmit" 点击提交按钮后

"dispatch is not a function at onSubmit" after clicking submit button

reactjs

redux

react-redux