React任务管理应用：点击左右箭头时如何修改props值？

你的核心问题在于任务状态的分散管理：每个StatusLine组件都独立维护自己的tasks状态，当你移动任务时，只有当前组件的任务列表会更新，其他步骤的组件无法感知到这个变化，导致任务不会在步骤间正确切换。另外，stepStatus变量不应该被重新赋值，每个StatusLine对应固定的步骤，直接使用传入的props.status即可。

下面是具体的修复方案：

1. 将任务状态提升到App组件 #

把tasks状态和操作函数（moveTask、deleteTask）放在所有StatusLine的共同父组件App中，这样所有步骤组件都能共享同一套任务数据，一处更新处处生效。

修改后的App.js：

import StatusLine from "./components/StatusLine/StatusLine";
import './App.css';
import { useState, useEffect } from 'react';
import axios from './config/axios'; // 注意路径匹配你的项目

function App() {
  const [tasks, setTasks] = useState([]);

  // 初始化加载任务
  useEffect(() => {
    async function getTask() {
      const res = await axios.get("/get-task", {
        withCredentials: true,
      });
      setTasks(res.data);
    }
    getTask();
  }, []);

  // 移动任务的逻辑
  async function moveTask(id, newStatus) {
    // 创建新的任务数组，避免直接修改原数据
    const updatedTasks = tasks.map(task => 
      task.id === id ? {...task, status: newStatus} : task
    );
    setTasks(updatedTasks);
    // 同步到后端
    await axios.post('/move-task', {id, stepStatus: newStatus}, {withCredentials: true});
  }

  // 删除任务的逻辑
  async function deleteTask(id) {
    const updatedTasks = tasks.filter(task => task.id !== id);
    setTasks(updatedTasks);
    // 这里补充后端删除的接口调用
    // await axios.delete(`/delete-task/${id}`, {withCredentials: true});
  }

  return (
    <div className="App">
      <h1>Task Management</h1>
      <main>
        <section>
          <StatusLine
            status='Step 1'
            tasks={tasks}
            moveTask={moveTask}
            deleteTask={deleteTask}
          />
          <StatusLine
            status='Step 2'
            tasks={tasks}
            moveTask={moveTask}
            deleteTask={deleteTask}
          />
          <StatusLine
            status='Step 3'
            tasks={tasks}
            moveTask={moveTask}
            deleteTask={deleteTask}
          />
          <StatusLine
            status='Step 4'
            tasks={tasks}
            moveTask={moveTask}
            deleteTask={deleteTask}
          />
        </section>
      </main>
    </div>
  );
}

export default App;

2. 简化StatusLine组件 #

去掉StatusLine自己的tasks状态和重复的操作函数，直接使用从App传递过来的props数据和方法。

修改后的StatusLine.js：

import React from "react";
import Task from "../Task/Task";
import "./StatusLine.css";
import AddTask from "../AddTask/AddTask"; // 确保引入这个组件
import { useState } from 'react';

const StatusLine = (props) => {
  const { status, tasks, moveTask, deleteTask } = props;
  const [modalOpen, setModalOpen] = useState(false);

  // 过滤当前步骤的任务
  const taskForStatus = tasks.filter(task => task.status === status);
  const taskList = taskForStatus.map((task) => (
    <Task
      deleteTask={deleteTask}
      moveTask={moveTask}
      key={task.id}
      task={task}
    />
  ));

  // 添加空任务的逻辑（你原代码里的handleAddEmpty，这里补全示例）
  function handleAddEmpty() {
    setModalOpen(true);
  }

  // 提交新任务的逻辑（示例）
  async function handleSubmit(taskData) {
    // 这里补充添加任务的逻辑，比如调用后端接口后更新App的tasks
    // const newTask = await axios.post('/add-task', {...taskData, status}, {withCredentials: true});
    // props.addTask(newTask.data); // 需要在App中添加addTask函数
    setModalOpen(false);
  }

  return (
    <div className="statusLine">
      <h3>{status}</h3>
      {taskList}
      <button onClick={handleAddEmpty} className="button addTask">
        +
      </button>
      <AddTask
        modalOpen={modalOpen}
        setModalOpen={setModalOpen}
        handleSubmit={handleSubmit}
      />
    </div>
  );
};

export default StatusLine;

3. Task组件无需修改（如果需要优化可以简化） #

你的Task.js逻辑是对的，保持原样即可，它只负责触发移动/删除操作，具体逻辑交给父组件处理。

关键修改点说明 #

• 状态提升：React的状态是单向流动的，共享状态必须放在共同的父组件中，这样所有子组件都能获取到最新数据。
• 不可变更新：修改任务状态时，使用map创建新数组和新对象（{...task, status: newStatus}），而不是直接修改原对象，这样React才能检测到状态变化并重新渲染组件。
• 统一操作逻辑：把moveTask和deleteTask放在App中，避免每个StatusLine重复实现，也保证了数据修改的一致性。

内容的提问来源于stack exchange，提问作者nihal muhammed