无法更新任务

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