Cant更新任务

Question

我有任务，通过单击编辑按钮或标签，它通过交换className启用任务的编辑模式。我不仅要交换className，还要关闭所有任务的编辑模式。但是似乎以这种方式，React更新对象“列表”，但实际上并没有重新渲染其他任务，只是单击这是我的App JS：

.task{
    display: block;
}
.textfield{
    display: none;
}

li.editing .task{display: none;}
li.editing  .textfield{
    display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
import React, {useState} from 'react';
import { v4 as uuidv4 } from 'uuid';
import Task from './Task'


export default function App() {
const [list, setNewList] = useState(sampleList)
let newTask={
      liId:uuidv4(),
      liName:'Place name of Task here...',
      editingActive:false
    } 

function setEditingLi(newName,id,editingActive){
  if (editingActive){editingActive=false}
  else{editingActive=true}
  let newList=[...list]
    let index=newList.findIndex(li=>li.liId===id)
        newList[index].liName=newName
        newList[index].editingActive=editingActive
  setNewList(newList)
}    

function toRepayActiveEditingLi(){
    let newLists=list.map(task=>{
      task.editingActive=false
    return task
    })
    setNewList(newLists)
}    

  return (
    <div>
      <input onClick={()=>setNewList([...list,newTask])}
        type="submit" value="Add Task" id="do_form"
      />
      <br/>
      <main id="general">
        <ul>
          {list.map(task=>{
                  return <Task
                    key={task.liId} toRepayActiveEditingLi={toRepayActiveEditingLi} 
                    setEditingLi={setEditingLi}{...task}
                  /> 
              })}
        </ul>
      </main>
      <br/><br/><br/><br/>
    </div>
  );
  }
  const sampleList=[]

这是我的任务组件：

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
import React, { useState} from 'react'

export default function Task(props) {
    const {
        liId,
        liName,
        editingActive,
        toRepayActiveEditingLi,
        setEditingLi} =props
    const [liClass, toggleLiClass] = useState('li')
    const [buttonName, toggleButtonName] = useState('edit')
    const [currentInputValue, setInputValue] = useState('')
    
    function handleToggleEditingClass(){
        toRepayActiveEditingLi()
        if(editingActive){
            let value = currentInputValue
                toggleLiClass('li')
                toggleButtonName('edit')
                if(value.trim()){
                    setEditingLi(currentInputValue,liId,editingActive)
                }
                else{
                    setEditingLi(liName,liId,editingActive)
                } 
        }else{
            toggleLiClass('li editing')
            toggleButtonName('save')
            setEditingLi(liName,liId,editingActive) 
        }
    }

    return (
        <li className={liClass} id={liId}>
        <label className="task"
            onClick={handleToggleEditingClass}
        >{liName}</label>
        <textarea type="text" className="textfield"
            onChange={(e)=>setInputValue(e.target.value)} defaultValue={liName}
        ></textarea>
        <button 
            onClick={handleToggleEditingClass}
        >{buttonName}</button>
    </li>
    )
}

Answer 1

从我可以从问题中提取的信息[[之后玩沙箱，我相信您想在选择任何要编辑的新任务时关闭其他任务的编辑模式。

您可以在Task上添加效果以移动editingActive道具更新时切换此状态的逻辑。

useEffect(() => {
  if (editingActive) {
    toggleLiClass("li editing");
    toggleButtonName("save");
  } else {
    toggleLiClass("li");
    toggleButtonName("edit");
  }
}, [editingActive]);

function handleToggleEditingClass() {
  toRepayActiveEditingLi();
  if (editingActive) {
    let value = currentInputValue;
    if (value.trim()) {
      setEditingLi(currentInputValue, liId, editingActive);
    } else {
      setEditingLi(liName, liId, editingActive);
    }
  } else {
    setEditingLi(liName, liId, editingActive);
  }
}