Jestem nowy, aby zareagować na js. Tworzę porównanie pomiędzy wpisywaniem użytkownika a faktycznym zdaniem do wpisania Jakoś jestem w stanie to osiągnąć, ale nie jest to idealne, ponieważ mapa zagnieżdżona nie renderuje się prawidłowo, jeśli litera jest poprawnie napisana, powinna renderować zielone tło Mój stan jest poprawnie aktualizowany, ale mój zagnieżdżony mapa Kinda nie działa występuje opóźnienieZagnieżdżona mapa nie renderuje poprawnie stanu Redux
Kod Komponent
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 Reduktor
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
Zrobiłem tą samą logiką z gładkimi React.js działa idealnie i zagnieżdżone mapa renderowania if else logiki właściwie nie ma opóźnienia na literę
https://codesandbox.io/s/zx3jkxk8o4
ale ta sama logika with Redux State with immutable js Nie działa w pętli zagnieżdżonej, jeśli w instrukcji else nie wiem, gdzie problem się powiąże ..i mój fragment kodu będzie trochę inny od kodu CodeSanbox ale logika jest taka sama
Nie mogę tego wystarczająco podkreślić: ** Nigdy nie modyfikuj stanu bezpośrednio **. Sklonuj obiekt, a następnie zmodyfikuj lub zrób coś, co nie zmienia bezpośrednio stanu. – Li357
Czy można również utworzyć kodek dla implementacji redux? – Li357