React onClick 没有在第一次点击时触发，第二次点击表现符合预期答案

【问题标题】：React onClick not firing on first click, second click behaves as expectedReact onClick 没有在第一次点击时触发，第二次点击表现符合预期
【发布时间】：2022-11-22 06:24:27
【问题描述】：

当我按下按钮 onclick() 时，我希望 SVG 图片发生变化。但它只适用于第二次按下。

    const [taskList, setTaskList] = useState([]);
    const [indexTask, setIndexTask]=useState({});
    const [statusTask, setStatusTask]=useState(false);


const markComplete = (props)=>{
        let tempList = taskList;
        for(let i=0; i<tempList.length; i++){
            if(indexTask===i){
                tempList[i].status = props;
            }     
        }
        setTaskList([...tempList]);
    }

 {taskList.map((obj,i)=>   
                    <div key={i} className='div-task'>
                        <div className='div-task-container'>
                            <div className='div-task-status'>
                                <div className='div-task-status-complete' onClick={()=>{markComplete(true); setIndexTask(i)}} role={'button'}>
                                <SvgTaskUncomplete statusTask={obj.status} setStatusTask={setStatusTask} ></SvgTaskUncomplete>
                                </div>
                                <div className='div-task-status-uncomplete' onClick={()=>{markComplete(false); setIndexTask(i)}} role={'button'}>
                                <SvgTaskComplete statusTask={obj.status} setStatusTask={setStatusTask}></SvgTaskComplete>
                                </div>

当我按下按钮 onclick() 时，我希望 SVG 图片发生变化。但它只适用于第二次按下。 first click on button second click on button

【问题讨论】：

let tempList = taskList; - 这什么都不做，您刚刚创建了另一个引用同一对象的变量
我知道，我只是以完成的结构为例，它起作用了

标签： javascript html css reactjs

【解决方案1】：

似乎发布的代码可能与 indexTask 状态过于复杂。

试试这个将 index 直接传递给 markComplete 的版本：

const [taskList, setTaskList] = useState([]);
const [statusTask, setStatusTask]=useState(false);

const markComplete = (status, index) => {
  let tempList = taskList;
  tempList[index].status = status;
  setTaskList([...tempList]);
};

{taskList.map((obj,i)=>   
  <div key={i} className='div-task'>
      <div className='div-task-container'>
          <div className='div-task-status'>
              <div className='div-task-status-complete' onClick={()=>{markComplete(true, i)}} role={'button'}>
              <SvgTaskUncomplete statusTask={obj.status} setStatusTask={setStatusTask} ></SvgTaskUncomplete>
              </div>
              <div className='div-task-status-uncomplete' onClick={()=>{markComplete(false, i)}} role={'button'}>
              <SvgTaskComplete statusTask={obj.status} setStatusTask={setStatusTask}></SvgTaskComplete>
              </div>

发布的代码是部分代码，因此无法对其进行测试，但希望这仍然可以作为参考。

【讨论】：