使用firebase, nextjs添加对象到嵌套数组

Question

我使用nextjs, firebase来构建我的项目，项目的想法是一个混合项目管理，用户可以创建一个有许多板的项目，并在其中保存任务:单板UI

我想这样保存板子:截图来自Firebase

代码:

这是板数组和项目状态的样子:

const [projectFields, setProjectFields] = useState({
title: '',
details: '',
date: '',
});

const [boardFields, setboardFields] = useState([
{
title: '',
type: '',
columns: [
{ name: "backlog" },
{ name: "In progress" },
{ name: "In review" }
]
},
]);

sendProject功能:

const sendProject = async () => {

if (loading) return;
setLoading(true);
const docRef = await addDoc(collection(db, "projects"), {
id: session.user.uid,
projectDetails: projectFields,
boards: boardFields,
timestamp: serverTimestamp(),
});

setLoading(false);
setProjectFields({
title: '',
details: '',
date: '',
})
setboardFields({
title: '',
type: '',
columns: [{}]
})

};

sendTask函数，它更新了"boards"在firebase文档中错误地:

const sendTask = async () => {
if (loading) return;
setLoading(true);
let object = {
id: '1',
priority: tasksFields.priority,
title: tasksFields.title,
date: tasksFields.date,
details: tasksFields.details,
chat: '0',
attachment: '0'
}

const taskRef = doc(db, "projects", projectId ?? "1");
const newBoards = [...project.boards];

newBoards[boardIndex] = {
...newBoards[boardIndex],
columns: {
...newBoards[boardIndex].columns[columnIndex],
tasks: [...newBoards[boardIndex].columns[columnIndex].tasks, object]
},
}
await updateDoc(taskRef, {
...project,
boards: newBoards,
});

setLoading(false);
setTasksFields(
{
id: '',
priority: '',
title: '',
details: '',
date: '',
attachment: '0',
}
)

};

下面是更新文档后的结果:数据库模式图片错误

我不知道如何正确更新它，请帮助吗?谢谢大家

Answer 1

我找到了解决方案👇:

更新sendTask函数:

const sendTask = async () => {

if (loading) return;
setLoading(true);
let object = {
id: '1',
priority: tasksFields.priority,
title: tasksFields.title,
date: tasksFields.date,
details: tasksFields.details,
chat: '0',
attachment: '0'
}

const taskRef = doc(db, "projects", projectId ?? "1");

const newBoard = {...project.boards};
const newColumn = [...project.boards[boardIndex].columns];

newColumn[columnIndex] = {
...newColumn[columnIndex],
tasks: [...newColumn[columnIndex].tasks, object]

};
newBoard[boardIndex] = {...newBoard[boardIndex], columns: newColumn};

await updateDoc(taskRef, {
...project,
boards: newBoard,
});

setLoading(false);
setTasksFields(
{
id: '',
priority: '',
title: '',
details: '',
date: '',
attachment: '0',
}
)
};


};