“调度不在的onsubmit功能”点击提交按钮

在输入字段中输入文本，然后单击提交按钮时发生错误之后：遗漏的类型错误：调度不在的onsubmit“调度不在的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 
    } 
}

来源

2017-04-25 Lukas

你可以让两个变化让你的代码工作。

首先：如果您在组件中使用dispatch，你不需要用connect

export default connect(mapStateToProps)(AddTodo)

二使用mapDispatchToProps因为调度将被默认提供给你：另一种方法是使使用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> 
) 
}

还有一件事，因为您在AddTodo参数中解决了{dispatch}的道具问题，因此您无权访问todos状态。

来源

2017-04-25 10:14:48

你并不需要使用dispatch，因为你已经在你的mapDispatchToProps使用bindActionCreators。

bindActionCreators是一个帮助动作创作者直接发送动作的帮手。所以你可以调用你的动作创建器，它应该自动发送动作。

您可以使用dispatch而不是通过mapDispatchToProps，或者您可以使用mapDispatchToProps注入的道具，而不是使用dispatch。这就是为什么mapDispatchToProps这样调用 - 它可以让你根据调度定义一些其他的道具，所以你不需要再次使用它。

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

来源

2017-04-25 09:50:03

“调度不在的onsubmit功能”点击提交按钮

回答

相关问题