ネストされたマップがRedux状態を正しくレンダリングしない

Question

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


    } 

}; 

がある動作しません

UPDATE

私はそれが完璧に動作し、ネストされたマップは、他のロジックが正しくありませんが、文字遅延

https://codesandbox.io/s/zx3jkxk8o4

しかし、同じロジックに存在する場合、レンダリング平野React.jsと同じロジックをしました不変のjsを持つRedux状態で他のステートメントがネストされたループで有効にならない問題がどこにあるか分かりませんし、私のコードスニペットはCodeSanboxコードと少し違っていますが論理は同じです

Answer 1

おそらく、反応のdiffingアルゴリズムはoldState === newStateを見て、再レンダリングをスキップします。そのような状況を回避するには、状態のルートに新しいオブジェクトを使用して、上記のチェックがfalseを返すようにします。 immutableJsを使用していることがわかります。代わりにcomponentShouldUpdateメソッドで強制的に再レン​​ダリングしてください。

また、開発ツールを使用して、コードを1行ずつステップ実行して何が起こっているのかを確認することも検討してください。

何も動作しない場合は、よりシンプルで依存性の少ないものに切り替え、必要なものを段階的に追加してください。