「調度不在的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功能」點擊提交按鈕

回答

相關問題