Javascript 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

我正在通过一些文本输入更新redux存储中的用户配置文件。用户信息在三个屏幕上可见

  • 在userDetail屏幕上,使用useSelector从使用Id的用户列表中查找用户。在此屏幕反映对redux存储所做的更改

  • 在用户摘要屏幕上。此屏幕向用户显示用户详细信息,然后用户可以单击编辑按钮,进入屏幕(3),其中有文本输入,用户可以编辑其详细信息

  • 在EditDetails屏幕上。这是文本输入的地方。用户可以编辑详细信息,并更新redux中的存储

  • 但是,在保存更改并使用
    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}`