如何更新reactjs中的數組狀態

我有我的按鈕的可見性陣列。我正在保存這些按鈕的狀態。如何更新reactjs中的數組狀態

this.state = { 
    score: 0, 
    status: "", 
    userSelected: "", 
    computerSelected: "", 
    visibility: [true, true, true] 
};

我想明智地更新可視性數組索引的值。我試圖像下面這樣做，但它不更新，它不斷添加數組中的新元素而不是數組的更新值。

var arrayvar = this.state.visibility.slice(); 
if (
    (user === "Rock" && computer === "Paper") || 
    (user === "Paper" && computer === "Rock") 
) { 
    arrayvar.push(true, true, false); // here set 1st and 2nd to true and 3rd to false 
} else if (
    (user === "Rock" && computer === "Scissors") || 
    (user === "Scissors" || computer === "Rock") 
) { 
    arrayvar.push(true, false, true); 
} else if (
    (user === "Paper" && computer === "Scissors") || 
    (user === "Scissors" || computer === "Paper") 
) { 
    arrayvar.push(false, true, true); 
} else if (user === "Rock" && computer === "Rock") { 
    arrayvar.push(true, false, false); 
} else if (user === "Paper" && computer === "Paper") { 
    arrayvar.push(false, true, false); 
} else if (user === "Scissors" && computer === "Scissors") { 
    arrayvar.push(false, false, true); 
} 
this.setState({ visibility: arrayvar });

任何人都可以建議如何做到這一點reactjs？

來源

2017-06-18 N Sharma

但這就是['push']（https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/push）所做的。 –

@OliverCharlesworth我明白了。你知道什麼是更新它嗎？ –

array.push將始終推送array中的新值，它不會更新現有值。

你需要把它寫這樣的：

arrayvar = [];      //create a variable, don't need to copy the state values here 


arrayvar = [true, true, false]; // assign new array inside conditions 

this.setState({ 
    visibility: arrayvar   //then update the state visibility array 
})

你並不需要創建的state array一個副本，因爲，你是更新整個array沒有具體的array的值，只需創建一個變量：

arrayvar = [];

全碼：

var arrayvar = []; 
if ((user === "Rock" && computer === "Paper") || (user === "Paper" && computer === "Rock")) { 
    arrayvar = [true, true, false]; 
} else if ((user === "Rock" && computer === "Scissors") || (user === "Scissors" || computer === "Rock")) { 
    arrayvar = [true, false, true] 
} else if ((user === "Paper" && computer === "Scissors") || (user === "Scissors" || computer === "Paper")) { 
    arrayvar = [false, true, true]; 
} else if (user === "Rock" && computer === "Rock") { 
    arrayvar = [true, false, false]; 
} else if (user === "Paper" && computer === "Paper") { 
    arrayvar = [false, true, false]; 
} else if (user === "Scissors" && computer === "Scissors") { 
    arrayvar = [false, false, true]; 
} 
this.setState({ visibility: arrayvar });

來源

2017-06-18 13:59:54

如果我不更新完整的可見性陣列，那麼我需要克隆然後怎麼做？ –

在這種情況下，首先創建一個副本，使用項目索引來更新特定值，然後更新狀態，如下所示：'let visibility = this.state.visibility.slice（）;可見性[item_index] =值; this.setState（{visibility}）' –

非常感謝Mayank +1 :) –

順便說一下，

var arrayvar = ["Rock", "Paper", "Scissors"] 
    .map(
     k => computer === k || user === k 
    );

可能會取代你寫的整個if-then級聯。

來源

2017-06-18 16:33:21 xtofl

它將如何工作？你能解釋一下嗎？看起來像最佳方法+1 –

它將數組中的每個'鍵'映射到'無論計算機還是用戶選擇它'。 – xtofl

如何更新reactjs中的數組狀態

回答

相關問題