Reactjs 与Firebase反应-提交Formik表单数据
我有一个react应用程序,它使用Formik作为表单,使用cloudfirestore作为数据库Reactjs 与Firebase反应-提交Formik表单数据,reactjs,firebase,google-cloud-firestore,formik,yup,Reactjs,Firebase,Google Cloud Firestore,Formik,Yup,我有一个react应用程序,它使用Formik作为表单,使用cloudfirestore作为数据库 <Formik initialValues={initialValues} validationSchema={Yup.object().shape({ title: Yup.string().required("Give your proposal a title"), subt
<Formik
initialValues={initialValues}
validationSchema={Yup.object().shape({
title: Yup.string().required("Give your proposal a title"),
subtitle: Yup.string().required("Now a subtitle"),
fieldOfResearch: Yup.array().required("What is your field of research?"),
disclosureStatus: Yup.string().nullable().required("Some projects are sensitive. Choose a disclosure setting."),
overview: Yup.string().required("Outline your proposal"),
objective: Yup.string().required("What is your objective?"),
currentThinking: Yup.string().required("Outline the current thinking"),
innovationStatement: Yup.string().required("If this proposal progresses previous research, what are the next steps that are being considered? If it is a paradigm shift, what has prompted it?"),
influence: Yup.string().required("How is this proposal influenced by prevailing opinion?"),
layperson: Yup.string().required("How would you describe this research to someone new to your field?"),
elevator: Yup.string().required("Give it a try."),
// video:
resourcesConfirmation: Yup.string().required("Do you have access to research infrastructure you will need?"),
participantPlan: Yup.string().required("Do you have a plan for how you will recruit participants for this research proposal? If your study does not require participants, then NA will do the job here."),
resourceRequests: Yup.array().required('What sort of resources are you seeking?'),
resourceOffers: Yup.array().required('What sort of resources will you bring to this project?'),
technique: Yup.string().required("Ideally, this answer looks something close to 'Yes, because...' or a 'No, but this team is amazing and will master these techniques in no time, because...'"),
pitfalls: Yup.string().required("If you've tried to look at this objectively, and can't see any pitfalls, then 'Not Applicable' will do here."),
community: Yup.string().required("It can be a good idea to do this. If you do, you'll show sensitivity to the interests of others in your field and may open doors for potential collaborations and translation opportunities."),
samplesize: Yup.string().required("These questions address research quality issues that funders are assessing in considering a proposal."),
methodDescription: Yup.string().required("What approach will you take in this research?"),
qualityControls: Yup.string().required("What controls will you put in place? These should address participants, comparators and any interventions."),
sopAdoption: Yup.string().required("Describe at a summary level, any part of the Statement of Procedures that you have proposed that is noteworthy for reviewers."),
participantNotification: Yup.string().required("Will you notify participants (if there are any) about the outcomes of this research? If so, describe how that will be done."),
preregisterPlatform: Yup.string().nullable().required("Select preregistration intention"),
teamOverview: Yup.string().required("Summarise the collective capabilities and experience of the team making this proposal"),
proposalLead: Yup.string().required("Enter the name of the team leader"),
indigenous: Yup.string().required("Either outline the contribution of indigenous team members or mark this field 'Not Applicable'"),
teamSkillGap: Yup.string().required("Either outline the contribution of indigenous team members or mark this field 'Not Applicable'"),
performanceIndicators: Yup.string().required("Either outline the performance indicators or mark this field 'Not Applicable'"),
timeline: Yup.string().required("Either outline the milestones or mark this field 'Not Applicable'"),
confirmationTeamLead: Yup.boolean().oneOf(
[true],
"Confirmation that you and each team member has reviewed each of the applicable policies is required"
),
outcomeOverview: Yup.string().required("How might your study contribute to knowledge in the field?"),
potentialApplications: Yup.string().required("Do you have any insight into potential applications for this research?"),
potentialResearchAngles: Yup.string().required("Are there any tangential research questions that you think might follow from this study?"),
budget: Yup.string().required("Attach a link to your project budget?"),
ethicsIssue: Yup.array().required("Complete your ethics assessment"),
ethicsManagementPlan: Yup.string().required("Add an ethics management plan, or if there are no issues, complete this field with 'Not Applicable'"),
conflict: Yup.string().required("Are there any conflicts of interest?"),
reproducibility: Yup.string().required("How will you approach reproducibility?"),
})}
我正在尝试将表单数据保存到CloudFireStore中。我的控制台或react inspector工具中没有错误,当我按下submit时,我可以在react inspect工具中看到按钮变为禁用,然后再次启用,但是表单没有清除数据,数据也没有发送到Cloud Firestore
My handleSubmit函数具有:
handleSubmit = (formState, { resetForm }) => {
// Now, you're getting form state here!
const payload = {
...formState,
fieldOfResearch: formState.fieldOfResearch.map(t => t.value),
preregisterPlatform: formState.preregisterPlatform.value,
resourceRequests: formState.resourceRequests.map(t => t.value),
resourceOffers: formState.resourceOffers.map(t => t.value),
ethicsIssue: formState.ethicsIssue.map(t => t.value),
disclosureStatus: formState.disclosureStatus.value,
createdAt: firebase.firestore.FieldValue.serverTimestamp()
}
console.log("formvalues", payload);
fsDB
.collection("project")
.add(payload)
.then(docRef => {
console.log("docRef>>>", docRef);
resetForm(initialValues);
})
.catch(error => {
console.error("Error adding document: ", error);
});
};
我的提交按钮有:
<div className="form-group">
<Button
variant="outline-primary"
type="submit"
id="ProjectId"
onClick={handleSubmit}
disabled={!dirty || isSubmitting}
>
Save
</Button>
</div>
拯救
表单很长,有39个问题,我可以从我的云Firestore数据使用情况中看出,我在读写方面没有接近极限。我不知道如何测量表单提交数据的大小,以了解表单数据是否超过云Firestore限制-是否有办法让Firestore告诉您这就是提交不起作用的原因
我在handleSubmit中查看有效负载的控制台日志没有运行-因此我认为肯定还有另一个问题-我只是找不到关于问题可能是什么的任何信息
是否有人对长表单未发布到Cloud Firestore存在问题?如果我只保留前10个问题,此表单将提交到数据库
<Formik
initialValues={initialValues}
validationSchema={Yup.object().shape({
title: Yup.string().required("Give your proposal a title"),
subtitle: Yup.string().required("Now a subtitle"),
fieldOfResearch: Yup.array().required("What is your field of research?"),
disclosureStatus: Yup.string().nullable().required("Some projects are sensitive. Choose a disclosure setting."),
overview: Yup.string().required("Outline your proposal"),
objective: Yup.string().required("What is your objective?"),
currentThinking: Yup.string().required("Outline the current thinking"),
innovationStatement: Yup.string().required("If this proposal progresses previous research, what are the next steps that are being considered? If it is a paradigm shift, what has prompted it?"),
influence: Yup.string().required("How is this proposal influenced by prevailing opinion?"),
layperson: Yup.string().required("How would you describe this research to someone new to your field?"),
elevator: Yup.string().required("Give it a try."),
// video:
resourcesConfirmation: Yup.string().required("Do you have access to research infrastructure you will need?"),
participantPlan: Yup.string().required("Do you have a plan for how you will recruit participants for this research proposal? If your study does not require participants, then NA will do the job here."),
resourceRequests: Yup.array().required('What sort of resources are you seeking?'),
resourceOffers: Yup.array().required('What sort of resources will you bring to this project?'),
technique: Yup.string().required("Ideally, this answer looks something close to 'Yes, because...' or a 'No, but this team is amazing and will master these techniques in no time, because...'"),
pitfalls: Yup.string().required("If you've tried to look at this objectively, and can't see any pitfalls, then 'Not Applicable' will do here."),
community: Yup.string().required("It can be a good idea to do this. If you do, you'll show sensitivity to the interests of others in your field and may open doors for potential collaborations and translation opportunities."),
samplesize: Yup.string().required("These questions address research quality issues that funders are assessing in considering a proposal."),
methodDescription: Yup.string().required("What approach will you take in this research?"),
qualityControls: Yup.string().required("What controls will you put in place? These should address participants, comparators and any interventions."),
sopAdoption: Yup.string().required("Describe at a summary level, any part of the Statement of Procedures that you have proposed that is noteworthy for reviewers."),
participantNotification: Yup.string().required("Will you notify participants (if there are any) about the outcomes of this research? If so, describe how that will be done."),
preregisterPlatform: Yup.string().nullable().required("Select preregistration intention"),
teamOverview: Yup.string().required("Summarise the collective capabilities and experience of the team making this proposal"),
proposalLead: Yup.string().required("Enter the name of the team leader"),
indigenous: Yup.string().required("Either outline the contribution of indigenous team members or mark this field 'Not Applicable'"),
teamSkillGap: Yup.string().required("Either outline the contribution of indigenous team members or mark this field 'Not Applicable'"),
performanceIndicators: Yup.string().required("Either outline the performance indicators or mark this field 'Not Applicable'"),
timeline: Yup.string().required("Either outline the milestones or mark this field 'Not Applicable'"),
confirmationTeamLead: Yup.boolean().oneOf(
[true],
"Confirmation that you and each team member has reviewed each of the applicable policies is required"
),
outcomeOverview: Yup.string().required("How might your study contribute to knowledge in the field?"),
potentialApplications: Yup.string().required("Do you have any insight into potential applications for this research?"),
potentialResearchAngles: Yup.string().required("Are there any tangential research questions that you think might follow from this study?"),
budget: Yup.string().required("Attach a link to your project budget?"),
ethicsIssue: Yup.array().required("Complete your ethics assessment"),
ethicsManagementPlan: Yup.string().required("Add an ethics management plan, or if there are no issues, complete this field with 'Not Applicable'"),
conflict: Yup.string().required("Are there any conflicts of interest?"),
reproducibility: Yup.string().required("How will you approach reproducibility?"),
})}
我认为我在firestore的使用范围内:
下一次尝试
所以,我把问题11-39中的每一个都从表格中拿出来,并对所有Yup验证进行了评论。我一次只添加一个问题,发现表单可以工作并发布到firestore,直到我取消对验证的注释。它们都通过了,没有错误。所以-现在我想知道firestore是否计算了检查它们的时间,这可能导致超时?可能吗?如果是这样,有没有办法从Firestore获得这就是问题所在的指示?下面是我的验证
我试着在10个批次中对验证进行注释,然后取消注释。如果我对从视频到最后的所有验证都进行了注释,则表单将成功发布到firebase。这些验证中没有错误。我就是不能有他们以及成功地张贴到数据库
<Formik
initialValues={initialValues}
validationSchema={Yup.object().shape({
title: Yup.string().required("Give your proposal a title"),
subtitle: Yup.string().required("Now a subtitle"),
fieldOfResearch: Yup.array().required("What is your field of research?"),
disclosureStatus: Yup.string().nullable().required("Some projects are sensitive. Choose a disclosure setting."),
overview: Yup.string().required("Outline your proposal"),
objective: Yup.string().required("What is your objective?"),
currentThinking: Yup.string().required("Outline the current thinking"),
innovationStatement: Yup.string().required("If this proposal progresses previous research, what are the next steps that are being considered? If it is a paradigm shift, what has prompted it?"),
influence: Yup.string().required("How is this proposal influenced by prevailing opinion?"),
layperson: Yup.string().required("How would you describe this research to someone new to your field?"),
elevator: Yup.string().required("Give it a try."),
// video:
resourcesConfirmation: Yup.string().required("Do you have access to research infrastructure you will need?"),
participantPlan: Yup.string().required("Do you have a plan for how you will recruit participants for this research proposal? If your study does not require participants, then NA will do the job here."),
resourceRequests: Yup.array().required('What sort of resources are you seeking?'),
resourceOffers: Yup.array().required('What sort of resources will you bring to this project?'),
technique: Yup.string().required("Ideally, this answer looks something close to 'Yes, because...' or a 'No, but this team is amazing and will master these techniques in no time, because...'"),
pitfalls: Yup.string().required("If you've tried to look at this objectively, and can't see any pitfalls, then 'Not Applicable' will do here."),
community: Yup.string().required("It can be a good idea to do this. If you do, you'll show sensitivity to the interests of others in your field and may open doors for potential collaborations and translation opportunities."),
samplesize: Yup.string().required("These questions address research quality issues that funders are assessing in considering a proposal."),
methodDescription: Yup.string().required("What approach will you take in this research?"),
qualityControls: Yup.string().required("What controls will you put in place? These should address participants, comparators and any interventions."),
sopAdoption: Yup.string().required("Describe at a summary level, any part of the Statement of Procedures that you have proposed that is noteworthy for reviewers."),
participantNotification: Yup.string().required("Will you notify participants (if there are any) about the outcomes of this research? If so, describe how that will be done."),
preregisterPlatform: Yup.string().nullable().required("Select preregistration intention"),
teamOverview: Yup.string().required("Summarise the collective capabilities and experience of the team making this proposal"),
proposalLead: Yup.string().required("Enter the name of the team leader"),
indigenous: Yup.string().required("Either outline the contribution of indigenous team members or mark this field 'Not Applicable'"),
teamSkillGap: Yup.string().required("Either outline the contribution of indigenous team members or mark this field 'Not Applicable'"),
performanceIndicators: Yup.string().required("Either outline the performance indicators or mark this field 'Not Applicable'"),
timeline: Yup.string().required("Either outline the milestones or mark this field 'Not Applicable'"),
confirmationTeamLead: Yup.boolean().oneOf(
[true],
"Confirmation that you and each team member has reviewed each of the applicable policies is required"
),
outcomeOverview: Yup.string().required("How might your study contribute to knowledge in the field?"),
potentialApplications: Yup.string().required("Do you have any insight into potential applications for this research?"),
potentialResearchAngles: Yup.string().required("Are there any tangential research questions that you think might follow from this study?"),
budget: Yup.string().required("Attach a link to your project budget?"),
ethicsIssue: Yup.array().required("Complete your ethics assessment"),
ethicsManagementPlan: Yup.string().required("Add an ethics management plan, or if there are no issues, complete this field with 'Not Applicable'"),
conflict: Yup.string().required("Are there any conflicts of interest?"),
reproducibility: Yup.string().required("How will you approach reproducibility?"),
})}
我打赌你发送给firestore的对象中有一些字段(11-39个问题),其中有未定义的或空的值
在发送到firestore之前,请尝试清除这些未定义的值,因为firestore不会保存未定义的值,并且会抛出错误
// You can send this to firestore.
const payload = {
a: 1,
b: 'text value',
c: [{ id: 432 }]
}
// You canNOT send this to firestore.
const payload = {
a: 1,
b: undefined,
c: [{ id: 432 }]
}
- 这很重要。这意味着问题出在Formik中。不是在Firebase
- 评论fsDB部分。将handleSubmit块包装在try/catch和console中。记录try部分和console。错误捕获部分。另外,在有效负载声明之前添加一个console.log。你得到的信息应该解释问题的原因
为了调试,我的意思是将handleSubmit替换为:
handleSubmit = (formState, { resetForm }) => {
try {
console.log('TRY');
// Now, you're getting form state here!
const payload = {
...formState,
fieldOfResearch: formState.fieldOfResearch.map(t => t.value),
preregisterPlatform: formState.preregisterPlatform.value,
resourceRequests: formState.resourceRequests.map(t => t.value),
resourceOffers: formState.resourceOffers.map(t => t.value),
ethicsIssue: formState.ethicsIssue.map(t => t.value),
disclosureStatus: formState.disclosureStatus.value,
createdAt: firebase.firestore.FieldValue.serverTimestamp()
}
console.log("formvalues", payload);
/*
fsDB
.collection("project")
.add(payload)
.then(docRef => {
console.log("docRef>>>", docRef);
resetForm(initialValues);
})
.catch(error => {
console.error("Error adding document: ", error);
});
*/
} catch (reason) {
console.error('CATCH', reason)
}
};
您的验证模式可能就是问题所在。您是否尝试过从一开始就删除形状位,我没有看到他们像在Formik文档中那样使用它,他们只是使用Yup.object({validation here})
你能多发一点你的代码吗?具体来说,handleSubmit
是如何连接到Formik的,它是如何传递到表单/按钮的?另外,您是否正在进行任何验证?控制台登录handleSubmit
未触发这一事实意味着它可能没有正确连接,或者没有通过验证。我可以通过删除一些问题来完成所有工作。表格中有39个。如果我只是删除了问题11-39,表格就提交了。我可以试着一个接一个地添加每个问题,但这似乎很奇怪,因为没有出现验证错误。你得到了任何验证吗?尝试控制台日志记录错误
或注释验证
属性。此数据似乎不足以调试。codesandbox将非常有用。您应该检查并共享console.error()
中的消息。并检查firestore安全规则和数据大小。看,或者,这就是我的观点。控制台中没有错误。没有验证失败。我已经阅读了几次CloudFireStore文档。我不知道我的总限制是多少个字符。我的表格里有39个问题。为了进行测试,我对每个字符串值使用了一个字符,有5个选择字段,最大选择大小为20个字符。我很确定这是在firestore的限制范围内的,但是firestore没有反馈试图提交被拒绝的数据。没有什么!firebase是否提供了任何工具来检查这是否是一个问题Hi-不,我成功地将所有39个问题添加到firestore。导致问题的部分是从视频到最后的Yup验证。我逐一检查了每个qn。他们都工作。没有任何初始值设置为null。他们都是。我该怎么做?