如何更新reactjs中的数组状态

Question

我有我的按钮的可见性阵列。我正在保存这些按钮的状态。

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？

Answer 1

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 }); 

Answer 2

顺便说一下，

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

可能会取代你写的整个if-then级联。