Question

我是新来的反应js。我正在创建用户输入和要输入的实际句子之间的比较不知怎的，我能够实现这一点但它不完美，就像嵌套地图无法正确呈现如果字母输入正确它应该呈现绿色背景我的状态正确更新但我的嵌套地图Kinda没有工作有延迟

组件代码

 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做了同样的逻辑它完美地工作并且嵌套地图正确渲染if else逻辑没有字母延迟

https://codesandbox.io/s/zx3jkxk8o4

但Redux State与不可变js的逻辑相同如果else语句我不知道问题在哪里，而且My Code Snippet与CodeSanbox略有不同，那么它是否会在嵌套循环中生效COde但逻辑是相同的

Answer 1

反应的diffing算法可能会看到oldState === newState并跳过重新渲染。要避免这种情况，请在状态根目录中使用新对象，以便上面的检查返回false。我看到您使用immutableJs，因此可能会强制使用componentShouldUpdate方法重新渲染。

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

如果什么都不起作用，切换到更简单，依赖性更小的东西，然后从那里开始，逐步添加你需要的东西。

嵌套映射未正确呈现Redux状态

1 个答案: