嵌套地图未正确呈现 Redux 状态答案

【问题标题】：Nested map is not rendering the Redux State Correctly嵌套地图未正确呈现 Redux 状态
【发布时间】：2017-11-30 15:20:03
【问题描述】：

我是反应 js 的新手。我正在创建用户键入和要键入的实际句子之间的比较不知何故我能够做到这一点，但它并不完美，例如嵌套地图无法正确呈现如果字母键入正确它应该呈现绿色背景我的状态已正确更新但我的嵌套地图有点不工作，有延迟

组件代码

 renderLine = () => {
    let test = this.props.test.get('master')
   return test.map(line => {
       return line.check.map( (ltr,i) =>  ltr.status ? <span key={i} className="correct">{ltr.letter}</span> : ltr.letter )
   })

};
handleKeyPress = e => {
    if(e.charCode === 32) {
        this.setState({
            pushToNext:true,
            currentTyping:""
        })
    }
};
handleInput = e => {
    if(e.target.value !== " "){
        let {storeValue} = this.state;
        console.log(storeValue.length);
        let updatedWord = e.target.value;
        let updateArr = [];
        if(storeValue.length  ===  0){
            updateArr = storeValue.concat(updatedWord)
        }else {
            if(this.state.pushToNext){
                updateArr = storeValue.concat(updatedWord)
            }else {
                storeValue.pop();
                updateArr = storeValue.concat(updatedWord);
            }
        }
        this.setState({
            currentTyping:updatedWord,
            storeValue:updateArr,
            pushToNext:false
        },() => {

            let {storeValue} = this.state
            let lastWordIndex = storeValue.length === 0 ? storeValue.length : storeValue.length - 1;
            let lastLetterIndex = storeValue[lastWordIndex].length === 0 ? storeValue[lastWordIndex].length : storeValue[lastWordIndex].length - 1;
            let lastWordValue = storeValue[lastWordIndex];
            let lastLetterValue = lastWordValue[lastLetterIndex];

            // console.log(lastWordIndex,lastLetterIndex,lastWordValue,lastLetterValue,"After tstae")
            return this.props.compareCurrentTextWithMater(lastWordIndex,lastLetterIndex,lastWordValue,lastLetterValue)

        });

    }







};

Redux 减速器

import {FETCH_USER_TYPING_TEXT,COMPARE_TEXT_WITH_MASTER} from "../actions/types";
import {fromJS} from 'immutable';

const initialState = fromJS({
    text:null,
    master:[],
    inputBoxStatus:false
});

export default function (state = initialState,action) {
    switch (action.type){
        case FETCH_USER_TYPING_TEXT:
            return setTextManipulated(state,action);
        case COMPARE_TEXT_WITH_MASTER:
            return compareTextWithMaster(state,action)
        default:
            return state
    }
}


const compareTextWithMaster = (state,action) => {

    let {lastWordIndex,lastLetterIndex,lastLetterValue} = action;
    let masterWord = state.get('master')[lastWordIndex];
    let masterLetter = masterWord.check[lastLetterIndex];
    let newState = state.get('master');

    if(typeof masterLetter !== "undefined"){
        if(masterLetter.letter === lastLetterValue){
            masterWord.check[lastLetterIndex].status = true;
            newState[lastWordIndex] = masterWord;
            return state.set('master',newState)
        }else {
            masterWord.check[lastLetterIndex].status = false;
            newState[lastWordIndex] = masterWord;
            return state.set('master',newState)
        }

    }else {
        console.log('Undefinedd  Set Eroing or wrong Space Chratced set Box Red Colot',newState);


    }

};

更新

我用普通的 React.js 做了同样的逻辑它完美地工作并且嵌套的地图正确渲染了 if else 逻辑没有字母延迟

https://codesandbox.io/s/zx3jkxk8o4

但是与具有不可变 js 的 Redux State 相同的逻辑不会对嵌套循环生效 if else 语句我不知道问题出在哪里..我的代码片段将与 CodeSanbox COde 有点不同但是逻辑是一样的

【问题讨论】：

我怎么强调都不为过：永远不要直接改变状态。要么克隆对象然后变异，要么做一些不直接修改状态的事情。
另外，你能为redux实现创建一个codepen吗？

标签： javascript reactjs immutable.js

【解决方案1】：

可能，react 的 diffing 算法确实看到了 oldState === newState 并跳过了重新渲染。为避免这种情况，请在状态的根中使用一个新对象，以便上述检查返回 false。我看到你使用immutableJs，所以可能会强制使用componentShouldUpdate 方法重新渲染。

还可以考虑使用开发工具逐行遍历代码，看看发生了什么。

如果没有任何效果，请切换到依赖较少的更简单的东西，然后从那里开始，逐步添加您需要的东西。

【讨论】：