使用 NativeBase Toast 组件时,无法在 React Native 中读取 属性 '_root' of null
Cannot read property '_root' of null in React Native when using NativeBase Toast component
我正在使用 NativeBase 的 Toast 组件在成功提交表单后显示一条消息,但每次 运行 我都会在控制台中收到此错误消息。
_onSubmit error TypeError: Cannot read property '_root' of null
at Function.show (ToastContainer.js:79)
at InventoryItemAdd.js:40
at tryCallOne (core.js:37)
at core.js:123
at JSTimers.js:98
at Object.callTimer (JSTimersExecution.js:95)
at Object.callImmediatesPass (JSTimersExecution.js:199)
at Object.callImmediates (JSTimersExecution.js:214)
at MessageQueue.js:222
at guard (MessageQueue.js:46)
这是我的渲染函数中的 JSX:
<Container>
<Navbar title="Add an Inventory Item" backArrow />
<Content keyboardShouldPersistTaps="handled">
<InventoryItemAddForm
onSubmit={this._onSubmit}
data={formData}
enableReinitialize={true}
initialValues={initialValues}
/>
</Content>
<FooterTabs />
</Container>
还有我的 _onSubmit
函数:
_onSubmit = ({name, inventoryTypeId, internalCode, description = "", measurementUnitId}) => {
const {inventoryItemCreate, showErrors} = this.props
return inventoryItemCreate({
input: {
name: name.trim(),
inventoryTypeId,
internalCode: internalCode.trim(),
description: description.trim(),
measurementUnitId,
}
})
.then(({data: {inventoryItemCreate}}) => {
dismissKeyboard()
Toast.show({
text: "Inventory item added successfully!",
position: "bottom",
buttonText: "Okay",
type: "success",
duration: 2000,
})
Actions.InventoryItemDetails({id: inventoryItemCreate.id})
})
.catch((error) => {
console.log('_onSubmit error', error)
showErrors()
})
}
我发现应用程序的根组件需要包装在 nativebase's <Root>
component 中以便 Toast 通知可靠地工作。
我正在使用 NativeBase 的 Toast 组件在成功提交表单后显示一条消息,但每次 运行 我都会在控制台中收到此错误消息。
_onSubmit error TypeError: Cannot read property '_root' of null
at Function.show (ToastContainer.js:79)
at InventoryItemAdd.js:40
at tryCallOne (core.js:37)
at core.js:123
at JSTimers.js:98
at Object.callTimer (JSTimersExecution.js:95)
at Object.callImmediatesPass (JSTimersExecution.js:199)
at Object.callImmediates (JSTimersExecution.js:214)
at MessageQueue.js:222
at guard (MessageQueue.js:46)
这是我的渲染函数中的 JSX:
<Container>
<Navbar title="Add an Inventory Item" backArrow />
<Content keyboardShouldPersistTaps="handled">
<InventoryItemAddForm
onSubmit={this._onSubmit}
data={formData}
enableReinitialize={true}
initialValues={initialValues}
/>
</Content>
<FooterTabs />
</Container>
还有我的 _onSubmit
函数:
_onSubmit = ({name, inventoryTypeId, internalCode, description = "", measurementUnitId}) => {
const {inventoryItemCreate, showErrors} = this.props
return inventoryItemCreate({
input: {
name: name.trim(),
inventoryTypeId,
internalCode: internalCode.trim(),
description: description.trim(),
measurementUnitId,
}
})
.then(({data: {inventoryItemCreate}}) => {
dismissKeyboard()
Toast.show({
text: "Inventory item added successfully!",
position: "bottom",
buttonText: "Okay",
type: "success",
duration: 2000,
})
Actions.InventoryItemDetails({id: inventoryItemCreate.id})
})
.catch((error) => {
console.log('_onSubmit error', error)
showErrors()
})
}
我发现应用程序的根组件需要包装在 nativebase's <Root>
component 中以便 Toast 通知可靠地工作。