Javascript 为什么onClick处理程序不更改图标标记的类名？

每当我点击带有onClick处理程序链接的正方形图标时，它不会改变那个图标的类名

在图标标记内，如果box.isChecked==true，那么我想显示“远fa复选框”的类名
但若box.isChecked===false，那个么我想显示“far-fa-square-icon”的类名。但它不起作用

应用程序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;

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

---

在这个代码块中，您没有更改对数组的引用，只是更改了值<代码>设置状态不会触发重新渲染，除非值引用发生更改

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

---

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

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;

import React，{useState}来自“React”
常数数据=[
{
id:0，
段落：“这是第一格”，
被检查：错误
},
{
id:1，
段落：“这是方框二”，
被检查：错误
},
{
id:2，
段落：“这是第三格”，
被检查：错误
},
{
id:3，
段落：“这是第四格”，
被检查：错误
}];
常量应用=（）=>{
let[list，setList]=useState（数据）；
常量更新列表=（id）=>{
setList（（prevList）=>{
返回prevList.map（（框）=>{
如果（box.id==id）{
如果（！box.isChecked）{
box.isChecked=true；
}否则{
box.isChecked=false；
}
}
})
});
}
返回(
{list.map（（框）=>{
返回(
updateList（box.id）}>
{box.para}
)
})}
)}
导出默认应用程序；

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

所以你应该这样做

let newList = [...list]; 

    setList(newList);

---

console.log是否显示了更改？是的console.log显示了更改，但类名仍然没有更改。这很好，非常感谢兄弟。

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;

let newList = [...list]; 

    setList(newList);