{"record":{"id":"9f9d20c14801ce0c","repo":"iflytek/astron-agent","slug":"usetableaddcontext-must-be-used-within-tableaddprovider","errorCode":null,"errorMessage":"useTableAddContext must be used within TableAddProvider","messagePattern":"useTableAddContext must be used within TableAddProvider","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"console/frontend/src/pages/resource-management/database-detail/database-table-add/context/table-add-context.tsx","lineNumber":203,"sourceCode":"      baseForm,\n      databaseRef,\n      actions,\n    }),\n    [state, dispatch, baseForm, databaseRef, actions]\n  );\n\n  return (\n    <TableAddContext.Provider value={value}>\n      {children}\n    </TableAddContext.Provider>\n  );\n};\n\n// Hook to use the context\nexport const useTableAddContext = (): TableAddContextType => {\n  const context = useContext(TableAddContext);\n  if (!context) {\n    throw new Error('useTableAddContext must be used within TableAddProvider');\n  }\n  return context;\n};\n\n// 便捷hooks\nexport const useTableAddState = (): TableAddState => {\n  const { state } = useTableAddContext();\n  return state;\n};\n\nexport const useTableAddActions = (): TableAddContextType['actions'] => {\n  const { actions } = useTableAddContext();\n  return actions;\n};\n\nexport const useTableAddForm = (): FormInstance<BaseFormValues> => {\n  const { baseForm } = useTableAddContext();\n  return baseForm;","sourceCodeStart":185,"sourceCodeEnd":221,"githubUrl":"https://github.com/iflytek/astron-agent/blob/5e758547a83371a5a4b29dadf4ac03e8dd527635/console/frontend/src/pages/resource-management/database-detail/database-table-add/context/table-add-context.tsx#L185-L221","documentation":"`useTableAddContext` backs the 'add table' flow in database-detail with TableAddProvider, exposing state, actions, baseForm and databaseRef. When consumed outside the provider the null context throws 'useTableAddContext must be used within TableAddProvider'. Related convenience hooks (useTableAddState etc.) inherit the same requirement.","triggerScenarios":"Rendering the table-add form/steps outside <TableAddProvider>; mounting the add-table component on another page; rendering it in a dialog whose content is created outside the provider; test/storybook renders without the wrapper.","commonSituations":"Reusing the add-table wizard in a different modal flow; refactoring the provider out of the mount point; conditional rendering that skips the provider on some branch.","solutions":["Wrap the table-add component tree with <TableAddProvider> at the flow entry point.","If the component is reused, lift the provider to the common parent (e.g. the modal container).","Wrap test renders with TableAddProvider.","Use the convenience hooks (useTableAddState) instead of raw context to keep one guard location."],"exampleFix":"// before\n<TableAddSteps /> // throws\n\n// after\n<TableAddProvider>\n  <TableAddSteps />\n</TableAddProvider>","handlingStrategy":"try-catch","validationCode":"const useTableAddContextSafe = (): TableAddContextType | undefined => useContext(TableAddContext);","typeGuard":"function hasTableAddContext(c: unknown): c is TableAddContextType {\n  return !!c && 'baseForm' in (c as object) && 'actions' in (c as object);\n}","tryCatchPattern":"let ctx: TableAddContextType;\ntry {\n  ctx = useTableAddContext();\n} catch {\n  return <TableAddUnavailable />;\n}","preventionTips":["Place <TableAddProvider> at the entry of the add-table flow (modal or route).","Reuse the convenience hooks (useTableAddState) so the guard stays centralized.","Include TableAddProvider in the shared test providers wrapper.","Never mount table-add subcomponents in pages outside the flow."],"tags":["react","context","provider"],"backgroundTag":"missing-required-argument","analyzedSha":"5e758547a83371a5a4b29dadf4ac03e8dd527635","analyzedAt":"2026-09-12T08:03:51.356Z","contentChangedAt":"2026-09-12T08:03:51.356Z","schemaVersion":2},"datasetVersion":"2026-09-16T04:17:20.429Z"}