javascript - 嵌套 map 未正确呈现 Redux 状态

Question

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

组件代码

 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 reducer

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 做了同样的逻辑，它工作得很好，嵌套的 map 正确地渲染了 if else 逻辑，没有字母延迟

https://codesandbox.io/s/zx3jkxk8o4

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

Answer 1

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

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

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