在 React Native Expo 中使用 react-redux 更改另一个键的值

Posted 2023-03-30

【中文标题】在 React Native Expo 中使用 react-redux 更改另一个键的值

【英文标题】：Change another key's value using react-redux In React Native Expo

【发布时间】：2021-09-19 14:46:00

【问题描述】：

首先，我不擅长英语。对不起。

我正在为一个游戏创建一个每日和每周任务检查应用程序，在这个应用程序中，用户可以在注册用户角色后检查每个角色的每日任务。但是，如果我检查一个角色的日常任务，则会检查所有其他角色。之后这种现象继续存在：

在应用重新启动之前创建一个角色并 按下应用的完全初始化按钮，直到应用重新启动

我尝试了一个多星期。我发现这出现在redux（react-redux）的reducer中。不过以我的技术完全看不懂，所以发了一个问题。

首先，图片是： my imgur

而且我以为你不会通过图片来理解它，所以我准备了一个 YouTube link .

This is 在 redox devtool 中，这两个字符的复选框排列实际上是如何变化的。 抱歉，我还没有插入图片。

const initialState = 
    LoaData: ,
    weekADay: '',
;

const reducer = (state = initialState, action) => 
    switch (action.type) 
        case 'CHECKBOX_REDUX':
        return changeCheckbox(state, action);

    default:
        return state;
;

以上代码是react-redux的reducer。 而Change Checkbox(state, action)函数如下。

const changeCheckbox = (state, action) => 
    let 
        contentType,  // in this question, i use 'daily' only
        firstIndex,   // this used dividing content
        id,           // this is character's unique id(=new Date) and checked character
        value         // i send checkbox array ex) [false, false, false]. 
     = action.payload;

    let newState = Object.assign(, state);
    let character = newState.LoaData.characters[id];
    let filteredContents = character.contents[contentType];

    if(contentType === 'daily')  // for test, show only 'daily'
        let weekADay = newState.weekADay; // Mon or Tue or Wed ... 
        for(let i = 0; i < filteredContents[weekADay][firstIndex].value.length; i++)  
            filteredContents[weekADay][firstIndex].value[i] = value[i];
        
    
    return newState;

底部是console.log(action.payload)

    "contentType": "daily",
    "firstIndex": 0,
    "id": "1632050917445",
    "value": [ true, false, false ],

经过多次测试，发现for语句出现问题。我还确认了所需角色的昵称会正常更改。但是，在 for 语句中，确认了“不同字符的值”的相同索引的布尔值在每次迭代中也发生了变化。

请帮帮我

redux：4.1.1

react-redux：7.2.4

反应：16.13.1

世博会：42.0.1

【参考方案1】：

这取决于您如何在商店的其他部分创建和更新角色，但您可能会在彼此之间共享角色对象的引用。你正在改变你在 redux 中不应该做的存储。

您在旧状态上调用 object.assign，然后创建 newState。但是，这只会为新状态本身创建一个新对象。它的所有属性仍然引用与旧状态相同的对象。

与您的分配相同 - let character = newState.LoaData.characters[id]; 实际上并没有在任何时候创建一个新对象。为此，您需要使用 object.assign，一直到要更改的属性，或者使用扩展运算符。

【讨论】：

哇，我按照你的建议解决了。这是由于 Object.assign 的浅拷贝。我解决了它如下。 ：let newState = Object.assign(, state);let newLoaData = JSON.parse(JSON.stringify(newState.LoaData));