React Native:提交时调度不起作用

Question

我正在尝试创建一个基本的待办事项列表，但当我在按下add后调度一个操作时，它不会调度。

我已经从每个函数中提取了dispatch(todo(todoList))，并将其留在主ToDo组件中，以便对输入搜索框的每个字母进行多次调用，并且我可以在Redux-dev tools中的redux存储中看到更新，因此我知道我的todo可以工作，但当我尝试提交时，它不会dispatch()。有人能帮帮我吗。

这是我的代码：

import {useDispatch } from 'react-redux'
import { todo } from './action/todo'
const ToDo = () => {
const [todo, setTodo] = useState('')
const [todoList, setTodoList] = useState([])
const dispatch = useDispatch()

const handleSubmit = (id , todo) => {
const newTodoList = todoList.concat({ id: id, val: todo })
return (
setTodo(''),
todo.length === 0
? <Text/>
: setTodoList(newTodoList) // if I put the dispatch here it doesn't work either
)
}
return (
<View style={styles.addPhotoCont}>
<TextInput
placeholder={props.textInputPlaceholder}
onChangeText={props => setTodo(props)}
value={todo}
/>
<TouchableOpacity 
onPress={() => handleSubmit(Date.now(), todo) && dispatch(todo(todoList))}>
<Text style={styles.addButton}>Add</Text>
</TouchableOpacity>
</View>
)
}

Answer 1

看起来您将todo设置了两次，一次设置为导入，第二次设置为状态。当您调用dispatch并传入todo时，它正在调用状态版本。

您应该将dispatch放在handleSubmit函数中。

此外，查看handleSubmit函数，返回将不起作用。你只能归还一件东西。您可以将其他函数放置在return语句上方。

编辑：以下代码示例：

import { useDispatch } from 'react-redux'
import { todo } from './action/todo'
const ToDo = (props) => {
const [todoInputValue, setTodoInputValue] = useState('')
const dispatch = useDispatch()

const handleSubmit = (todo) => {
dispatch(todo({id: Date.now(), val: todoInputValue}))
setTodoInputValue('')
}

return (
<View style={styles.addPhotoCont}>
<TextInput
placeholder={props.textInputPlaceholder}
onChangeText={value => setTodoInputValue(value)}
value={todoInputValue}
/>
<TouchableOpacity 
onPress={() => handleSubmit(Date.now())}>
<Text style={styles.addButton}>Add</Text>
</TouchableOpacity>
</View>
)
}