Bản đồ lồng nhau không hiển thị trạng thái Redux chính xác

Question

Tôi mới sử dụng phản ứng js. Bằng cách nào đó tôi có thể đạt được điều này nhưng nó không hoàn hảo như bản đồ lồng nhau không hiển thị đúng nếu chữ được gõ chính xác nó sẽ làm cho nền màu xanh lá cây Trạng thái của tôi được cập nhật đúng Bản đồ Kinda không làm việc ở đó là một sự chậm trễ

Component Mã

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 Giảm

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


    } 

}; 

CẬP NHẬT

tôi đã cùng một logic với React.js đơn giản nó hoạt động hoàn hảo và bản đồ lồng nhau render nếu khác Logic đúng không có trên thư chậm trễ

https://codesandbox.io/s/zx3jkxk8o4

Nhưng cùng một logic với Redux Nhà nước với js bất biến Không có hiệu lực với vòng lặp lồng nhau nếu tuyên bố khác Tôi không biết nơi mà vấn đề Relies .. và Đoạn mã của tôi sẽ có chút khác biệt từ CodeSanbox COde Nhưng Logic là giống nhau

Answer 1

Có lẽ, thuật toán phản ứng khác thường thấy rằng oldState === newState và bỏ qua hiển thị lại. Để tránh tình huống đó, hãy sử dụng một đối tượng mới trong thư mục gốc của tiểu bang để kiểm tra ở trên trả về false. Tôi thấy rằng bạn sử dụng immutableJs, do đó, có thể buộc phải hiển thị lại bằng phương pháp componentShouldUpdate.

Đồng thời xem xét sử dụng công cụ dev để xem qua từng dòng mã để xem điều gì đang diễn ra.

Nếu không có gì hoạt động, hãy chuyển sang điều gì đó đơn giản hơn với ít phụ thuộc hơn và đi từ đó, tăng dần những gì bạn cần.