2017-10-04 111 views
0

我正在學習反應,我有這個教程在線測驗反應,所以我嘗試做一些調整,我想用戶點擊HellYa它會增加例如答案類型 - 「布朗」「 d」,‘JP’每+1,這是我的quizQuestion.jsJavascript,ReactJs setState not working

{ 
question: "I am task oriented in order to achieve certain goals", 
answers: [ 
    { 
    type: "Brown,D,JP", 
    content: "Hell Ya!" 
    }, 
    { 
    type: " ", 
    content: "Nah" 
    } 
] 
}, 

我爲初始狀態構造是遵循

this.state = { 
    counter: 0, 
    questionId: 1, 
    question: '', 
    answerOptions: [], 
    answer: '', 
    answersCount: { 
    Green: 0, 
    Brown: 0, 
    Blue: 0, 
    Red: 0, 
    A: 0, 
    B: 0, 
    C: 0, 
    D: 0, 
    EI: 0, 
    SN: 0, 
    TF: 0, 
    JP: 0 
    }, 
    result: '' 
}; 

和教程之後,我使用的反應,addons-更新answerCount和答案更新,這裏是我的功能

setUserAnswer(answer) { 
if (answer.trim()) { 
    const answer_array = answer.split(','); 
    let updatedAnswersCount = null; 
    answer_array.forEach((answer) => { 
    updatedAnswersCount = update(this.state.answersCount, { 
     [answer]: {$apply: (currentValue) => currentValue + 1} 
    }); 
    }, this); 
    this.setState({ 
    answersCount: updatedAnswersCount, 
    answer: answer 
    }); 
} 
} 

但經過多次嘗試,我仍然無法弄清楚如何逐個遞增答案類型1,現在它只更新JP + 1例如但它不更新布朗和D,我該怎麼辦?謝謝

回答

1

它似乎總是使用當前狀態作爲基礎對象,因此只有foreach中的最後一個答案纔會更新。

嘗試以下操作:

setUserAnswer(answer) { 
if (answer.trim()) { 
    const answer_array = answer.split(','); 
    let answerCountUpdates = update(this.state.answersCount, {$merge: {}}) // copy this.state.answersCount, will search a better way 

    answer_array.forEach((answer) => { 
    answerCountUpdates = update(answerCountUpdates, { 
     [answer]: {$apply: (currentValue) => currentValue + 1} 
    }); 
    }, this); 

    updatedAnswersCount = update(this.state.answersCount, {$merge: answerCountUpdates}) 

    this.setState({ 
    answersCount: updatedAnswersCount, 
    answer: answer 
    }); 
    } 
} 
0

看起來你已經命名了你的forEach()的迭代對象「answer」以及傳遞給setUserAnswer()的參數。嘗試改變其中之一,因爲這可能會導致問題。