“调度不在的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
}
}
答
你可以让两个变化让你的代码工作。
首先:如果您在组件中使用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
状态。
答
你并不需要使用dispatch
,因为你已经在你的mapDispatchToProps
使用bindActionCreators
。
bindActionCreators
是一个帮助动作创作者直接发送动作的帮手。所以你可以调用你的动作创建器,它应该自动发送动作。
您可以使用dispatch
而不是通过mapDispatchToProps
,或者您可以使用mapDispatchToProps
注入的道具,而不是使用dispatch
。这就是为什么mapDispatchToProps
这样调用 - 它可以让你根据调度定义一些其他的道具,所以你不需要再次使用它。
检查:https://github.com/reactjs/react-redux/blob/master/docs/api.md#examples