React：如何用useState设置数组对象status为默认值并实现子组件修改

1. 修正App组件核心问题 #

首先移除组件函数体中直接调用setStatus()的代码（这会导致组件无限重渲染），再通过路由参数获取当前任务ID，匹配对应任务的status作为默认值。

修改后的App.js代码 #

import React, { useState } from "react";
import { BrowserRouter, Switch, Route, useParams } from "react-router-dom";
import TaskComponent from "./components/TaskComponent";

const Tasks = [
  {
    id: "001",
    status: 0,
    priority: 2,
    title: "Develop website homepage",
    description:
      "Create a visually appealing and responsive homepage for the website",
    schedule: {
      creation_time: "2021-07-23T10:00:00"
    },
    author_name: "John Smith"
  },
  {
    id: "002",
    status: 1,
    priority: 1,
    title: "Implement user authentication",
    description: "Add user authentication feature to the website",
    schedule: {
      creation_time: "2021-07-24T14:30:00"
    },
    author_name: "Sarah Lee"
  }
];

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

  return (
    <BrowserRouter>
      <div>
        <Switch>
          <Route path="/task/:id" component={TaskWrapper} />
        </Switch>
      </div>
    </BrowserRouter>
  );
}

// 封装路由组件，用于获取参数并初始化状态
function TaskWrapper() {
  const { id } = useParams();
  const [status, setStatus] = useState(() => {
    // 根据ID匹配对应任务的status作为初始值
    const targetTask = Tasks.find(task => task.id === id);
    return targetTask ? targetTask.status : "";
  });
  const [priority, setPriority] = useState("");

  return (
    <TaskComponent
      tasks={Tasks}
      currentTaskId={id}
      status={status}
      setStatus={setStatus}
      priority={priority}
      setPriority={setPriority}
    />
  );
}

export default App;

2. 实现TaskComponent的选择器交互逻辑 #

在子组件中添加下拉选择器，绑定当前status状态，当选择变化时调用父组件传递的setStatus更新状态。

TaskComponent.js示例代码 #

import React from "react";

const TaskComponent = ({ tasks, currentTaskId, status, setStatus }) => {
  // 获取当前任务详情
  const currentTask = tasks.find(task => task.id === currentTaskId);

  if (!currentTask) {
    return <div>任务不存在</div>;
  }

  // 定义状态选项，可根据业务需求调整
  const statusOptions = [
    { value: 0, label: "未开始" },
    { value: 1, label: "进行中" },
    { value: 2, label: "已完成" }
  ];

  return (
    <div className="task-detail">
      <h2>{currentTask.title}</h2>
      <p>作者: {currentTask.author_name}</p>
      <div>
        <label>任务状态:</label>
        <select 
          value={status} 
          onChange={(e) => setStatus(Number(e.target.value))}
        >
          {statusOptions.map(opt => (
            <option key={opt.value} value={opt.value}>
              {opt.label}
            </option>
          ))}
        </select>
      </div>
      <p>{currentTask.description}</p>
    </div>
  );
};

export default TaskComponent;

关键说明 #

• 用useParams获取路由中的任务ID，确保初始状态与当前访问的任务匹配。
• 采用函数式初始化useState，避免每次渲染重复执行find操作，提升性能。
• 子组件通过onChange事件触发setStatus，将选择的状态值同步到父组件状态中。
• 处理了任务不存在的边界情况，避免页面报错。

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