我最近开始和React一起工作,即使我经常遇到问题,我也很享受.
组件#1,我通过单击按钮发出GET请求,然后在表格中显示一些数据.
组件#2是一个输入字段,我想输入一些数据,并在下面显示,应该是简单的吗?
当我发出一个动作并完成我的GET请求时,状态如下所示:
{
isFetching: false,ispressed: true,items: [{item: 1},{item: 2},{item: 3}]
}
然后我想导航到我的其他组件.我需要取消订阅吗?因为当我导航到我的另一个组件所在的另一个页面时,状态将保持不变.
如果我在我的组件#2上发送一个动作,状态如下所示:
[
{id: 1,text: 'foo'},{id: 2,text: 'bar'}
]
在这两个组件中,我使用的是mapStatetoPros,尽管我并不真正理解它是如何工作的,这就是我相信我遇到问题的地方和原因.
function mapStatetoProps(state) {
return state;
}
它只是返回现在的状态.当我在组件之间切换时,我会收到错误消息.如果我在我的组件#2上发送一个动作,然后尝试导航到我的组件#1(GET-REQUEST),我将得到以下内容:
prev state Object { isFetching=false,ispressed=true,items=[10]}
action Object { type="ADD_Todo",id=0,text="asd"}
next state [Object { id=0,text="asd"}]
导航到其他页面
Error: `mapStatetoProps` must return an object. Instead received [object Object].
应该如何在我的场景中使用mapStatetoProps?
我需要使用componentwillUnmount吗?取消订阅我的商店?
我觉得我可以问一百个问题,但我不会.我一直在阅读文档,但我仍然想弄明白.
任何关于思想过程的链接,建议以及其他有用的东西都非常适合.
编辑:
这是我的减速机:
正如Ricky在下面提到的,我需要将我的数组变成一个对象.
case ADD_Todo:
return [
...state,todo(undefined,action)
]
const todo = (state = [],action) => {
case ADD_Todo:
return {
id: action.id,text: action.text
}
}
[
{id: 1,text: 'bar'}
]
使它成为一个对象:
{
myData: [
{id: 1,text: 'bar'}
]
}
并且不要“取消订阅”州. Redux将所有状态存储在一个对象中.每个组件有选择地在提供给Redux connect()的函数(mapStatetoProps)中声明它们所需的状态属性.
编辑
作为响应更新的问题 – 您将传入一个默认状态的数组.使用对象:
const todo = (state = {},action) => {
// initialize your default state properties
switch (action.type) {
case ADD_Todo:
return {
...state
id: action.id,text: action.text
}
default:
return state;
}
}
您可能希望在reducer中初始化默认状态属性.但所有这些东西都在docs / examples中.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。