在窗体控制输入中反应js useReduer钩子
我有问题与使用useReucer与输入。我试图在这里使用受控输入，但我一直收到错误；受控输入是不受控制的
从“React”导入React，{useReducer，useffect}；
从“axios”导入axios；
常量初始状态={
post: {},
user: ""
}const reducer=（状态、操作）=
switch(action.type){
case "Fetch_data":
return {
post: action.payload
}
case "On_change":
return {
user: action.payload
}
case "Fetch_error":
return {
post: {}
}
default:
return state
}
}Const ReucerFetchdata = () =
const [info, dispatch] = useReducer(reducer, initialState)
useEffect(()=>{
axios
.get(`https://jsonplaceholder.typicode.com/posts/${info.user}`)
.then (res => {
console.log(res)
dispatch({type: "Fetch_data", payload: res.data})
})
.catch(err => {
console.log(err)
dispatch({type: "Fetch_error"})
})
}, [info.user])
const handleChange = (event) =>{
dispatch({type: "On_change", payload: event.target.value})
}
return(
<div>
<input type="text" onChange={handleChange} value={info.user}/>
<p>{info.post.title}</p>
</div>
)
}
导出默认值
共有2个答案
猜一猜：你在取回帖子后正在删除user键，所以info。用户未定义。
您的减速器应为：
switch(action.type) {
case 'Fetch_data':
return {
...state,
post: action.payload
}
...
}
总是返回
{
...state
[someKey]: someValue
}
在您的On\u更改和Fetch\u错误中。
您需要分散整个状态，然后从减速器返回时更新必要的密钥。在这种情况下onChange称为On_change，其操作没有从还原器状态返回post，从而导致错误。
参考：修复的沙箱
-
问题内容： 我有一个简单的react组件，其形式相信可以控制一个输入： 运行我的应用程序时，出现以下警告： 警告：MyForm正在更改要控制的文本类型的不受控制的输入。输入元素不应从不受控制切换为受控制（反之亦然）。确定在组件的使用寿命中使用受控或非受控输入元素 我相信我的输入是有价值的，因此受到控制。我想知道我在做什么错？ 我正在使用React 15.1.0 问题答案： 我相信我的输入是有价值的
-
现在,你已经在运用 MATLAB 的命令行了,输入命令语句，就会看到结果出现在命令窗口中。 这一节介绍如何： 控制输出值的格式 用MATLAB命令隐藏输出 在命令行中输入长的命令 编辑命令行
-
这里我使用的是react hooks状态 在这里，我试图改变来自API的默认值。但是，我不能在改变方法上改变。 谢谢
-
我应该让我的组件“受控”吗？什么是“最佳实践”？
-
在我看来，React-Hooks-useState非常适合模式选择使用props中的值或使用自己的状态，但是当我有条件地使用hook时，lint显示了一些错误。 工作示例 我尝试使用钩子，条件如下，但是使用eslint error