为什么onClick处理程序不更改图标标记的className

Question

每当我点击链接了onClick处理程序的方形图标时，它不会更改该图标的className。

在图标标记内部，如果box.isChecked===true，那么我想显示className的"；远fa方格图标">
但是如果box.isChecked＝＝＝false，那么我想显示className为"远立面图标"。但它不起作用。

应用程序js文件：

import React , {useState} from 'react'
const data = [
{
id:0,
para:"This is Box One",
isChecked:false
},
{
id:1,
para:"This is Box Two",
isChecked:false
},
{
id:2,
para:"This is Box Three",
isChecked:false
},
{
id:3,
para:"This is Box Four",
isChecked:false
}];

const App = () => {
let [list,setList] = useState(data);
const checked = (id) => {
for(let i = 0;i < list.length;i++){
if(i === id){
if(list[i].isChecked === false){
list[i].isChecked = true;
break;
}else{
list[i].isChecked = false;
break;
}
}
}
let newList = list;
console.log(newList);
setList(newList);
}
return(
<>
{list.map((box) => {
return (
<div className="box" key={box.id}>
<i className={box.isChecked === true ? "far fa-check-square icon":"far fa-square icon"} onClick={() => checked(box.id)}> </i>
<p className="para"> {box.para} </p>
</div>
)
})}
</>
)}
export default App;

索引js文件：

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import './index.css'
ReactDOM.render(<App />,document.getElementById("root"));

索引css文件：

*{
margin:0px;
padding:0px;
box-sizing:border-box;
}
.box{
width:250px;
padding:15px;
margin:0px 0px 15px 0px;
background-color:rgb(81, 162, 255);
}
.icon{
font-size:25px;
cursor:pointer;
color:white;
margin:0px 0px 5px 0px;
}
.para{
font-size:20px;
font-family:arial;
color:white;
}

Answer 1

在这个代码块中，您没有更改对数组的引用，只是更改值。除非值引用发生更改，否则setState不会触发重新渲染。

const checked = (id) => {
for(let i = 0;i < list.length;i++){
if(i === id){
if(list[i].isChecked === false){
list[i].isChecked = true;
break;
}else{
list[i].isChecked = false;
break;
}
}
}
let newList = list; // <-- you are not creating a new array here.
console.log(newList);
setList(newList);
}

若要解决此问题，可以使用更新的值克隆阵列。

setList([...list]);

Answer 2

问题是React通过执行浅层对象相等性检查来检查道具和状态的更改。如果您将状态设置为相同的初始对象/数组，React不会对其进行任何更新

所以你应该这样做，而不是

let newList = [...list]; 
setList(newList);

Answer 3

您应该避免总是更改您的状态，您的问题是您传递的是相同的引用，而不是数组的克隆，因此您的状态根本不会在内部更新。

import React , {useState} from 'react'
const data = [
{
id:0,
para:"This is Box One",
isChecked:false
},
{
id:1,
para:"This is Box Two",
isChecked:false
},
{
id:2,
para:"This is Box Three",
isChecked:false
},
{
id:3,
para:"This is Box Four",
isChecked:false
}];

const App = () => {
let [list,setList] = useState(data);
const updateList = (id) => {
setList((prevList) => {
return prevList.map((box) => {
if(box.id === id){
if(!box.isChecked){
box.isChecked = true;
} else {
box.isChecked = false;
}
}
})
});
}
return(
<>
{list.map((box) => {
return (
<div className="box" key={box.id}>
<i className={box.isChecked === true ? "far fa-check-square icon":"far fa-square icon"} onClick={() => updateList(box.id)}> </i>
<p className="para"> {box.para} </p>
</div>
)
})}
</>
)}
export default App;