无法更新任务

Question

我有任务，通过单击编辑按钮或标签它可以通过交换类名来启用任务的编辑模式。我不仅要交换 className，还要关闭所有任务的编辑模式。但似乎以这种方式 React 更新对象 'lists'，但实际上并没有重新渲染其他任务，只有点击的这是我的应用程序 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);
  }
}

无法更新任务

Cant update tasks

javascript

reactjs

react-dom