javascript - React + Redux + Hook,状态更新出错
问题描述
我正在使用 React JS、Hooks 和 redux 创建一个简单的 Todo 应用程序。按照下面的代码为什么我不能更新状态和检索数据?当我提交输入字段时,它不会显示错误,但我无法从 Redux state 检索数据。大多数情况下,使用 useSelector 函数和 initialState 可能会出错。
# necessary imports,omitted for readers ease.
function FormComp() {
const dispatch = useDispatch()
const [inputdata,setInputdata] = useState('')
const handlesubmit =(e)=>{e.preventDefault();
dispatch(allActions.formAction.addTodo(inputdata))
}
const addtodo = useSelector(state=>state.todo)
return (
<div>
<form>
<input onChange={(e)=>setInputdata(e.target.value)} value={inputdata} />
<button onClick={handlesubmit}> submit </button>
</form>
{console.log(addtodo)} # console shows undefined
</div>
)
}
export default FormComp
减速机功能
import { ADDTODO } from "../constants/types";
const initialState={todo:'no todos'}
const toDos = (state=initialState,action)=>{
switch(action.type){
case ADDTODO:return{
...state,todo:action.payload
}
default:return state
}
}
export default toDos
动作功能
import { ADDTODO } from "../constants/types"
const addTodo=(todo)=>{return {
type:ADDTODO,
payload:todo
}}
export default{
addTodo
}
解决方案
推荐阅读
- c++ - 你如何抽象接口类
- node.js - nodejs写入不打开的文件
- ruby-on-rails - 启动我的 Rails 服务器时出错:767: '' 处出现意外令牌 (JSON::ParserError)
- java - 如何使用来自 Java 文本字段的用户输入运行 .sh 脚本?
- c# - 子模块依赖项和 Visual Studio 项目 - 创建具有非线性依赖项的体系结构
- angular - 如何从角度 5 中的查询字符串中读取值?
- python - 如何返回数据框的 json 格式?
- c# - 伪造来自测试的 GetAsync 调用
- google-bigquery - 如何通过 BigQuery 从 Firebase 分析中获取事件转换
- api - HttpErrorResponse Unauthorized (401) Angular 8 与 Laravel 5.8 和 Passport Authintication