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

Question

我是 React 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 有点不同但是逻辑相同

Answer 1

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

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

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

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

Nested map is not rendering the Redux State Correctly

javascript

reactjs

immutable.js