Javascript redux商店正在更新,但某些屏幕上未显示更改
我正在通过一些文本输入更新redux存储中的用户配置文件。用户信息在三个屏幕上可见Javascript redux商店正在更新,但某些屏幕上未显示更改,javascript,reactjs,react-native,react-redux,Javascript,Reactjs,React Native,React Redux,我正在通过一些文本输入更新redux存储中的用户配置文件。用户信息在三个屏幕上可见 在userDetail屏幕上,使用useSelector从使用Id的用户列表中查找用户。在此屏幕反映对redux存储所做的更改 在用户摘要屏幕上。此屏幕向用户显示用户详细信息,然后用户可以单击编辑按钮,进入屏幕(3),其中有文本输入,用户可以编辑其详细信息 在EditDetails屏幕上。这是文本输入的地方。用户可以编辑详细信息,并更新redux中的存储 但是,在保存更改并使用props.navigation.g
props.navigation.goBack()导航回上一个屏幕(2)后代码>屏幕2没有反映我刚刚对redux商店所做的更改。如果我进入屏幕(1),我可以看到所做的更改。类似地,当我在屏幕(3)上重新编辑详细信息时,将显示第一次编辑中所做的更改。只是屏幕(2)没有显示所做的任何更改
我使用constcurrentuser=useSelector(state=>state.users.currentUser)获取当前用户代码>在所有屏幕上,从那里我访问用户子属性,如名称、地址、个人信息等
我的用户的初始状态是
const initialState = {
availableUsers: USERS,
currentUser: USERS.find(user => user.id === 'b1')
};
我还没有将它连接到服务器,所以我只是使用一个虚拟用户作为当前登录的用户
下面是我在我的user.js中更新用户信息的逻辑
case UPDATE_USER:
const serveMale = action.updateInfo.male;
const serveFemale = action.updateInfo.female;
const newDescription = action.updateInfo.description;
state.currentUser.Male = serveMale;
state.currentUser.Female = serveFemale;
state.currentUser.description = newDescription
return {
...state
}
我已经在调试器中进行了四次检查,我的存储正在正确更新,这清楚地显示在我的屏幕(1)中,其中显示了正确更新的信息。只是屏幕(2)给了我一些问题
更新:
我终于让它工作了。我认为问题在于我只更新了initialState中的currentUser,而不是整个USERS数组中的currentUser。我不知道这为什么有效,但确实有效。这是代码
首先,我在所有用户的数组中找到了当前用户的索引。
然后创建一个newUser类,合并新旧信息。
然后用新用户创建的内容覆盖当前用户和可用用户[userIndex]
,并返回状态
case UPDATE_USER:
const userIndex = state.availableUsers.findIndex(user === user.id === action.id);
const serveMale = action.updateInfo.male;
const serveFemale = action.updateInfo.female;
const newDescription = action.updateInfo.description;
const newUser = new User(
state.currentUser.id,
state.currentUser.name,
state.currentUser.workId,
state.currentUser.years,
state.currentUser.imageUrl,
serveMale,
serveFemale,
newDescription,
)
state.availableUsers[userIndex] = newUser;
state.currentUser = newUser;
return {
...state
}
这可能是因为您使用的是props.navigation.goBack()
,它只会将您指向会话历史记录中存储的信息不包含任何更改的点。更新存储后,尝试使用pushState()
或push()
(如果您使用的是React Router)导航。在reducer中,您也在改变状态。但不确定这是否是问题背后的原因
更新应该类似于:
`
案例更新用户:
const{male,female,description}=action.updateInfo
return {
...state,
currentUser: {
male,
female,
description
}
}
`
写入state.currentUser.Male=serveMale
实际上是在改变实际的state对象,即使您返回一个新的state对象 你在使用路由吗?可能是因为你在屏幕2中使用了另一个操作,它会清除屏幕2中的当前状态,但在屏幕1中,你有正确的操作,并按照你的建议进行还原,实际上删除了currentUser中除男性、女性和描述之外的所有其他子元素。您知道如何保存未更改的子项,并且只覆盖男性、女性和描述将其写入:`return{…state,currentUser:{…state.currentUser,男性,女性,description}`