React-Native：提交时调度不起作用

Question

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

我已经从每个函数中取出 dispatch(todo(todoList))out 并将其留在主 ToDo 组件中，以便对输入到搜索框中的每个字母进行多次调用，我可以在 @987654323 的 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 时，它正在调用状态版本。

您应该将调度放在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>
    )
}