Verschachtelte Karte rendert den Redux-Zustand nicht korrekt

Question

Ich bin neu, um js zu reagieren. Ich erstelle einen Vergleich zwischen Benutzereingabe und tatsächlich zu typifizierendem Satz Irgendwie kann ich das erreichen, aber es ist nicht perfekt wie verschachtelte Karte wird nicht richtig gerendert, wenn Buchstabe korrekt eingegeben wird, sollte es grünen Hintergrund darstellen Mein Zustand wird richtig aktualisiert Aber mein geschachtelt Karte Kinda nicht funktioniert gibt es eine Verzögerung

Component-Code

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); 


    } 

}; 

UPDATE

habe ich die gleiche Logik mit einfachen React.js es funktioniert perfekt und verschachtelte Karte machen die, wenn sonst Logik richtig ist es nicht auf Brief Verzögerung

https://codesandbox.io/s/zx3jkxk8o4

aber der gleichen Logik mit Redux State mit unveränderbarer js Wird nicht wirksam mit verschachtelten Schleife, wenn sonst Aussage Ich weiß nicht, wo das Problem liegt .. und Mein Code Snippet wird ein wenig anders als CodeSanbox COde Aber die Logik ist Same

Answer 1

Wahrscheinlich sieht der Diffing-Algorithmus von react das oldState === newState und überspringt das Rendern. Um diese Situation zu vermeiden, verwenden Sie ein neues Objekt im Stammverzeichnis des Status, sodass die obige Überprüfung false zurückgibt. Ich sehe, dass Sie immutableJs verwenden, also möglicherweise erzwingen, erneut mit componentShouldUpdate Methode rendern.

Denken Sie auch daran, mit den Dev-Tools Schritt für Schritt durch den Code zu gehen, um zu sehen, was vor sich geht.

Wenn überhaupt nichts funktioniert, wechseln Sie zu etwas einfacherem mit weniger Abhängigkeiten und gehen Sie von dort aus, inkrementell hinzufügen, was Sie brauchen.