React -合并两个组件值

Question

用ReactJS构建一个简单的待办事项列表应用。可以在此页面编辑现有任务:

import React, {useState, useEffect} from "react";
import {PageLayout} from "../components/page-layout";
import {useParams, useNavigate} from 'react-router-dom';
import TaskDataService from "../services/TaskService";
import DatePicker from 'react-datepicker';
import FadeIn from 'react-fade-in';
import UserDataService from "../services/UserService";
export const Task = props => {
const {id} = useParams();
let navigate = useNavigate();
const initialTaskState = {
id: null,
familyId: "",
userId: "",
ownerId: "",
ownerName: "",
title: "",
description: "",
completed: false,
dueDate: new Date()
};
const [currentTask, setCurrentTask] = useState(initialTaskState);
const [message, setMessage] = useState("");
const [members, setMembers] = useState([]);
const [currentMember, setCurrentMember] = useState(null);
const [currentIndex, setCurrentIndex] = useState(-1);
const getTask = id => {
TaskDataService.get(id)
.then(response => {
setCurrentTask(response.data);
console.log(response.data);
})
.catch(e => {
console.log(e);
});
};
useEffect(() => {
retrieveMembers();
}, []);
useEffect(() => {
if (id)
getTask(id);
}, [id]);
const handleInputChange = event => {
const {name, value} = event.target;
setCurrentTask({...currentTask, [name]: value});
};
const setActiveMember = (member, index) => {
setCurrentMember(member);
setCurrentIndex(index);
};
const retrieveMembers = () => {
UserDataService.listMembers()
.then(response => {
setMembers(response.data);
console.log(response.data);
})
.catch(e => {
console.log(e);
});
};
const updateCompleted = status => {
var data = {
id: currentTask.id,
userId: currentTask.userId,
title: currentTask.title,
ownerId: currentMember.userId,
ownerName: currentMember.firstName,
description: currentTask.description,
completed: status,
dueDate: currentTask.dueDate
};
TaskDataService.update(currentTask.id, data)
.then(response => {
setCurrentTask({...currentTask, completed: status});
console.log(response.data);
})
.catch(e => {
console.log(e);
});
};
const updateTask = () => {
TaskDataService.update(currentTask.id, currentTask)
.then(response => {
console.log(response.data);
setMessage("The task was updated successfully!");
})
.catch(e => {
console.log(e);
});
};
const deleteTask = () => {
TaskDataService.remove(currentTask.id)
.then(response => {
console.log(response.data);
navigate("/tasks");
})
.catch(e => {
console.log(e);
});
};
return (
<PageLayout>
<FadeIn>
<div className="list row">
<div className="col-md-6">
{currentTask ? (
<div className="edit-form">
<h4>Task</h4>
<form>
<div className="form-group">
<label htmlFor="title" class="form-label">Title</label>
<input
type="text"
className="form-control"
id="title"
name="title"
value={currentTask.title}
onChange={handleInputChange}
/>
</div>
<div className="form-group">
<label htmlFor="description" class="form-label">Description</label>
<input
type="text"
className="form-control"
id="description"
name="description"
value={currentTask.description}
onChange={handleInputChange}
/>
</div>
<div className="form-group">
<label htmlFor="dueDate" class="form-label">Due Date</label>
<DatePicker
onChange={date => handleInputChange({
target: {
value: date.toISOString().split("T")[0],
name: 'dueDate'
}
})}
name="dueDate"
dateFormat="yyyy-MM-dd"
value={currentTask.dueDate.toString().split("T")[0]}
/>
</div>
<div className="form-group">
<label htmlFor="status" className="form-label">
<strong>Status:</strong>
</label>
{currentTask.completed ? " Done" : " Not Done"}
</div>
<ul className="list-group">
<label htmlFor="owner" className="form-label">Task Owner</label>
{members &&
members.map((member, index) => (
<li
className={
"list-group-item " + (index === currentIndex ? "active" : "")
}
onClick={=> setActiveMember(member, index)}
key={index}
>
{member.firstName} {member.lastName}
</li>
))}
</ul>
<div className="col-md-6">
{currentMember ? (
<div>
</div>
) : (
<div>
</div>
)}
</div>
</form>
{currentTask.completed ? (
<button
className="badge text-bg-warning mr-4"
onClick={() => updateCompleted(false)}
>
Not Done?
</button>
) : (
<button
className="badge text-bg-primary mr-2"
onClick={() => updateCompleted(true)}
>
Done!
</button>
)}
<button className="badge text-bg-danger mr-2" onClick={deleteTask}>
Delete
</button>
<button
type="submit"
className="badge text-bg-success"
onClick={updateTask}
>
Update
</button>
<p>{message}</p>
</div>
) : (
<div>
<br/>
<p>Please click on a Task...</p>
</div>
)}
</div>
</div>
</FadeIn>
</PageLayout>
);
};

我的问题是在成员选择部分，你可以改变任务的所有权:

<ul className="list-group">
<label htmlFor="owner" className="form-label">Task Owner</label>
{members &&
members.map((member, index) => (
<li
className={
"list-group-item " + (index === currentIndex ? "active" : "")
}
onClick={=> setActiveMember(member, index)}

key={index}
>
{member.firstName} {member.lastName}
</li>
))}
</ul>

…我们实际更新任务的函数是:

const updateTask = () => {
TaskDataService.update(currentTask.id, currentTask)
.then(response => {
console.log(response.data);
setMessage("The task was updated successfully!");
})
.catch(e => {
console.log(e);
});
};

从列表中选择一个新的所有者实际上并没有改变任务中的ownerId/ownerName值。我已经弄清楚，这是因为新的所有者值生活在currentMember，而任务信息生活在currentTask -所以我需要弄清楚如何从更新的currentMember获得信息到currentTask中适当的字段。我已经摆弄了配置，但找不到这样做的方法。任何建议吗?

Answer 1

我明白了。关键是在一个变量中定义任务结构，这样我就可以指定从哪里提取ownerId值。

原始:

const updateTask = () => {
TaskDataService.update(currentTask.id, currentTask)
.then(response => {
console.log(response.data);
setMessage("The task was updated successfully!");
})
.catch(e => {
console.log(e);
});
};

更新:

const updateTask = () => {
var data = {
id: currentTask.id,
userId: currentTask.userId,
title: currentTask.title,
ownerId: currentMember.userId,
ownerName: currentMember.firstName,
description: currentTask.description,
dueDate: currentTask.dueDate
};
TaskDataService.update(currentTask.id, data)
.then(response => {
console.log(response.data);
setMessage("The task was updated successfully!");
})
.catch(e => {
console.log(e);
});
};