我是新来的反应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,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,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
我使用普通的React.js做了同样的逻辑它完美地工作并且嵌套地图正确渲染了if else逻辑没有信函延迟
https://codesandbox.io/s/zx3jkxk8o4
但是与Redux State使用不可变js的相同逻辑如果使用else语句我不知道问题依赖于什么,而且我的代码片段与CodeSanBox COde略有不同但是逻辑是相同的
解决方法
也许,react的diffing算法确实看到oldState === newState并跳过重新渲染.要避免这种情况,请在状态根目录中使用新对象,以便上面的检查返回false.我看到你使用了immutableJs,所以可能强制使用componentShouldUpdate方法重新渲染.
还要考虑使用开发工具逐行逐步查看代码,看看发生了什么.
如果什么都不起作用,切换到更简单,依赖性更小的东西,并从那里开始,逐步添加你需要的东西.