如何更新盒子

Question

如何更新以下框...

<div className="container team-member-tasks">
      <header className="header-box">
        <h1>Team Member Tasks</h1>

...按照以下脚本将任务标记为完成后...

const TaskButton = task => {
          if (task.task.status !== 'Complete') {
            return (
              <td>
                <h3
                  onClick={() => markAsDone(task)}
                  style={{ color: 'red' }}
                  data-toggle="tooltip"
                  data-placement="top"
                  title="MARK AS DONE. MARKING THIS AS DONE WOULD REMOVE THE TASK PERMANENTLY."
                  className="markAsDoneButton"
                >
                  X
                </h3>
              </td>
            )
          } else {
            return <td></td>
          }
        }

        const markAsDone = async task => {
          task.task.status = 'Complete'
          const updatedTask = {
            taskName: task.task.taskName,
            priority: task.task.priority,
            resources: task.task.resources,
            isAssigned: task.task.isAssigned,
            status: task.task.status,
            hoursBest: parseFloat(task.task.hoursBest),
            hoursWorst: parseFloat(task.task.hoursWorst),
            hoursMost: parseFloat(task.task.hoursMost),
            estimatedHours: parseFloat(task.task.hoursEstimate),
            startedDatetime: task.task.startedDate,
            dueDatetime: task.task.dueDate,
            links: task.task.links,
            whyInfo: task.task.whyInfo,
            intentInfo: task.task.intentInfo,
            endstateInfo: task.task.endstateInfo,
            classification: task.task.classification,
          }
          await updateTask(String(task.task._id), updatedTask)
          await deleteSelectedTask(task.task._id, task.task.mother)
          await dispatch(getAllUserProfile())
          await fetchAllTasks()
        }

...使用相应的状态属性，导致页面组件重新呈现新信息？

如果点击删除任务按钮，任务将从数据库中删除。

下面是删除按钮的截图。

但是如果点击删除按钮“X”，我需要自动刷新图像中的框（或整个页面？）

我试过...

1 - 我在页面组件中设置任务的初始状态（问题：哪个页面？标题框在哪里？我应该创建一个新的 jsx 还是可以使用相同的组件？（也许是其中之一错误））：

const [tasks, setTasks] = useState([]);

2 - 我将任务状态作为 prop 传递给 TaskButton 组件（问题：与 taksButton 相同的脚本？我应该创建一个新的 jsx 还是我可以使用相同的 TaskButton 组件？（可能是错误之一））：

<TaskButton task={task} tasks={tasks} setTasks={setTasks} />

在 markAsDone 函数中，我更新了任务状态并调用 setTasks 函数来更新状态：

const markAsDone = async task => {
  task.task.status = 'Complete';
  const updatedTask = { ... };
  await updateTask(String(task.task._id), updatedTask);
  await deleteSelectedTask(task.task._id, task.task.mother);
  await dispatch(getAllUserProfile());
  await fetchAllTasks();
  
  // Update task status
  const updatedTasks = tasks.map(t => {
    if (t._id === task.task._id) {
      return {
        ...t,
        status: 'Complete'
      };
    } else {
      return t;
    }
  });
  setTasks(updatedTasks);
};

在页面组件中，我使用更新的任务状态重新渲染组件（问题：哪个页面？同样的header-box在哪里？我应该创建一个新的jsx还是我可以使用相同的组件？（也许是其中一个错误））：

<div className="container team-member-tasks">
  <header className="header-box">
    <h1>Team Member Tasks</h1>
  </header>
  <TaskList tasks={tasks} />
</div>

Answer 1

鉴于您提供的内容，您似乎正在寻找一种在任务列表状态发生变化时更新用户界面的方法(

tasks

)

一种方法是使用

useState()

组件中的

<TaskList tasks={tasks}/>

挂钩来更新状态并根据当前任务列表呈现列表。

示例结构的快速草图可能看起来像这样（为简单起见，我省略了 TaskButton 组件和您的任务数据结构）：

任务列表组件

const TaskList = ({ tasks }) => {
  const [tasksState, setTaskState] = useState(tasks);

  const onRemove = (id) => {
    setTaskState(() => taskState.filter(t => t.id !== id));
    // other logic 
  }

   const onComplete = (id) => {
        const newTasks = tasksState.map(t => {
        if(t.id === id) {
          t.isComplete = !t.isComplete;
        }
        return t;
      });
      setTasks(() => newTasks);
   }
  return(
    <div>
      {tasksState.length !== 0 &&
         tasksState.map((t, idx) => {
            <TaskItem taskProps={t} onComplete={onComplete} onRemove={onRemove} />
         })
      }
    </div>
  );
}

任务项组件

 const TaskItem = (props) => {

    // props.taskData is the shape of your data and is simply a placeholder
    const onComplete = () => {
      props.onComplete(props.taskData.id); 
    }

    const onRemove = () => {
     props.onRemove(props.taskData.id); 
    }

    return (
      <div> 
        {props.taskProps.taskData}
        <button onClick={onComplete}>Complete Me</button>
        <button onClick={onRemove}>Delete Me</button>
      </div>
    )

 }

在上面，我们在 TaskListComponent 中为您的任务列表设置了一个初始状态，这是我们构建的

tasks

道具。为了这个例子，我假设

tasks

道具是一个对象数组。

然后我们设置方法来处理任务的删除和完成，这会改变当前任务列表的状态，从而重新渲染它。这些方法采用任务 ID 来查找

tasksState

数组中的给定元素。

将任务映射到 TaskItems 时，我们为组件提供 onComplete 和 OnRemove 属性作为指向我们刚刚创建的方法的指针。

然后在 TaskItem 组件中，我们创建方法来处理任一按钮类型的点击并调用父方法（将任务的 id 传递给父级以进行查找）。有更多简洁的方法可以做到这一点，但我在这个例子中保持简单。

希望这有帮助。 链接到我做的一个例子：https://jsfiddle.net/danielheery20/ep2fcjxn/

如果有任何错误，请记下或提出更改建议。我不能问澄清问题，因为我没有这样做的评级，这就是为什么我正在做一个假设