请看下面我的代码。我目前正在尝试使用syncfusion react gantt charts创建一个甘特charts。代码工作正常，但我现在想改变GanttData数组中的数据，这是GanttComponent的数据源，使其成为动态的。我使用react router dom从数据库中使用加载器钩子拉数据。一旦我得到这些数据，我想拉出一些日期，并把它们在GanttData数组中，但我不知道如何使用useLoaderData，除非它在函数中。有人可以帮助吗？如果这不清楚，请道歉。如果您需要更多信息，请让我知道。
export const loader = async ({ request, params }) => {
try {
const { data } = await customFetch.get(`/projects`);
return data;
} catch (error) {
toast.error(error?.response?.data?.msg);
return redirect("/dashboard/all-jobs");
}
};
const GanttData = [
{
TaskID: 1,
ProjectNo: "29895",
TaskName: "Stoneybridge WTW",
StartDate: new Date("04/02/2019"),
EndDate: new Date("05/21/2019"),
subtasks: [
{
TaskID: 1.1,
TaskName: "Sodium Carbonate",
StartDate: new Date("04/02/2019"),
Duration: 4,
Progress: 150,
comments: "unlucky",
subtasks: [
{
TaskID: 1.11,
TaskName: "Design",
StartDate: new Date("04/02/2019"),
Duration: 30,
Progress: 150,
},
{
TaskID: 1.12,
TaskName: "Workshop",
StartDate: new Date("05/02/2019"),
Duration: 30,
Progress: 150,
},
{
TaskID: 1.13,
TaskName: "Site",
StartDate: new Date("06/02/2019"),
Duration: 30,
Progress: 150,
},
],
},
{
TaskID: 1.2,
TaskName: "PACl",
StartDate: new Date("04/02/2019"),
Duration: 4,
Progress: 150,
comments: "unlucky",
subtasks: [
{
TaskID: 1.21,
TaskName: "Design",
StartDate: new Date("04/02/2019"),
Duration: 30,
Progress: 150,
},
{
TaskID: 1.22,
TaskName: "Workshop",
StartDate: new Date("05/02/2019"),
Duration: 30,
Progress: 150,
},
{
TaskID: 1.23,
TaskName: "Site",
StartDate: new Date("06/02/2019"),
Duration: 30,
Progress: 150,
},
],
},
{
TaskID: 1.3,
TaskName: "Ammonium Sulphate",
StartDate: new Date("04/02/2019"),
Duration: 4,
Progress: 150,
comments: "unlucky",
subtasks: [
{
TaskID: 1.31,
TaskName: "Design",
StartDate: new Date("04/02/2019"),
Duration: 30,
Progress: 150,
},
{
TaskID: 1.2,
TaskName: "Workshop",
StartDate: new Date("05/02/2019"),
Duration: 30,
Progress: 150,
},
{
TaskID: 1.13,
TaskName: "Site",
StartDate: new Date("06/02/2019"),
Duration: 30,
Progress: 150,
},
],
},
],
},
{
TaskID: 2,
ProjectNo: "31139",
TaskName: "Barra WTW",
StartDate: new Date("04/02/2019"),
EndDate: new Date("05/21/2019"),
subtasks: [
{
TaskID: 2.1,
TaskName: "Sodium Carbonate",
StartDate: new Date("04/02/2019"),
Duration: 4,
Progress: 150,
comments: "unlucky",
subtasks: [
{
TaskID: 2.11,
TaskName: "Design",
StartDate: new Date("04/02/2019"),
Duration: 30,
Progress: 150,
},
{
TaskID: 2.12,
TaskName: "Workshop",
StartDate: new Date("05/02/2019"),
Duration: 30,
Progress: 150,
},
{
TaskID: 2.13,
TaskName: "Site",
StartDate: new Date("06/02/2019"),
Duration: 30,
Progress: 150,
},
],
},
{
TaskID: 2.2,
TaskName: "Ammonium Sulphate",
StartDate: new Date("04/02/2019"),
Duration: 4,
Progress: 150,
comments: "unlucky",
subtasks: [
{
TaskID: 2.21,
TaskName: "Design",
StartDate: new Date("04/02/2019"),
Duration: 30,
Progress: 150,
},
{
TaskID: 2.22,
TaskName: "Workshop",
StartDate: new Date("05/02/2019"),
Duration: 30,
Progress: 150,
},
{
TaskID: 2.23,
TaskName: "Site",
StartDate: new Date("06/02/2019"),
Duration: 30,
Progress: 150,
},
],
},
],
},
];
const splitterSettings = {
position: "30%",
};
const timelineSettings = {
timelineUnitSize: 60,
timelineViewMode: "Month",
topTier: {
unit: "Year",
},
bottomTier: {
unit: "Month",
},
};
function GanttChart() {
const { projects } = useLoaderData();
console.log(projects);
console.log(projects[0].projectEnd);
const taskFields = {
id: "TaskID",
name: "TaskName",
startDate: "StartDate",
duration: "Duration",
progress: "Progress",
child: "subtasks",
};
return (
<GanttComponent
dataSource={GanttData}
taskFields={taskFields}
height="530px"
width="1200px"
splitterSettings={splitterSettings}
allowResizing={false}
timelineSettings={timelineSettings}
collapseAllParentTasks={true}
>
<ColumnsDirective maxWidth="100" minWidth="70" width="10">
<ColumnDirective
field="TaskID"
width="100"
maxWidth="100"
minWidth="100"
></ColumnDirective>
<ColumnDirective
field="ProjectNo"
headerText="Project Number"
width="80"
allowResizing={false}
maxWidth="100"
minWidth="100"
></ColumnDirective>
<ColumnDirective
field="TaskName"
headerText="Task Name"
width="200"
maxWidth="100"
minWidth="100"
></ColumnDirective>
</ColumnsDirective>
<Inject services={[Resize]} />
</GanttComponent>
);
}
export default GanttChart;字符串
1条答案
按热度按时间jpfvwuh41#
你遇到的问题是
GanttData是一个标准的JS变量，所以每次你的组件（JS函数）被渲染（即“运行函数”）时，变量GanttData都会被重新创建并重新初始化为你提供的硬编码值。如果你想有一个保存数据的变量，能够更新该数据，并看到跨渲染器更改的数据，然后你想用一个状态变量（
useState()）或引用变量（useRef()）。状态变量的好处是，当您使用“set state function”更新值时，（调用useState()的组件）将导致组件重新呈现。引用变量的好处是，您可以更新它们的值，而不会导致组件重新呈现。因此，在您的示例中，我怀疑您希望将
GanttData（我建议将其重命名为ganttData）定义为状态变量（const [ganttData, setGanttData] = useState([{ ...... }])），然后在loader()函数中使用setGanttData()更新状态变量，以将新获取的值放入ganttData中，这将导致组件重新呈现，向您显示新获取的值。