组件未定义时获得属性
是指在使用组件时，如果该组件未被正确定义或初始化，尝试获取该组件的属性值时会出现错误或返回空值的情况。
在前端开发中，组件是指可重用的代码模块，用于构建用户界面。当使用一个组件时，通常需要在代码中引入该组件，并在适当的位置进行实例化和配置。如果组件未被正确定义或初始化，尝试获取该组件的属性值时会导致错误。
解决组件未定义时获得属性的问题，可以采取以下几种方式：
- 检查组件是否正确引入：确保在使用组件之前，已经正确引入了该组件的代码文件。可以通过检查文件路径、文件名等方式确认引入是否正确。
- 检查组件是否正确实例化：在使用组件之前，需要将组件实例化为对象，并进行相应的配置。确保组件已经被正确实例化，并且配置参数正确。
- 检查组件是否正确定义：组件的定义包括组件的属性、方法等。确保组件的定义正确，并且属性名称与获取属性时的名称一致。
- 错误处理：在代码中添加错误处理机制，当组件未定义时，可以通过捕获错误并进行相应的处理，例如给出错误提示、使用默认值等。
总结起来，组件未定义时获得属性是一个常见的错误情况，在开发过程中需要仔细检查组件的引入、实例化和定义，以确保组件能够正确使用。在腾讯云的云计算服务中，可以使用云函数 SCF（Serverless Cloud Function）来实现前端组件的部署和管理，详情请参考腾讯云函数 SCF的官方文档：腾讯云函数 SCF。
相关·内容
2回答
我试图创建一个组件，它允许我通过传递一个引用来修改另一个组件。
这就是我想要做的。
.html：
<my-component #myComponent></my-component>
<mk-on-boarding [connectedTo]="myComponent"></mk-on-boarding>
.ts：
ngAfterViewInit() {
if (this.connectedTo.getBoundingClientRect) {
this.nativeElement = this.conne
浏览 2提问于2020-01-30得票数 2
回答已采纳
2回答
测试用例失败，说明未定义属性的错误。
我将roleID传递给getResults()。当我为(‘应该创建组件’).truthy运行ng测试时，它会抛出一个错误-->未定义的roleID。
我还在*ngIf="x?.roleID“这样的HTML中使用过，在那里我得到了相同的错误。
*.spec.ts文件示例：
// it('should create', () => {
// expect(component).toBeTruthy();
// });
// While running the ng Test for this Component,
浏览 0提问于2019-01-17得票数 0
回答已采纳
我有一个main.js文件，它创建一个app，并向它添加各种东西，比如router、store和axios。
这就是我在全球添加axios时所做的工作：
import {createSSRApp, createApp, h} from 'vue';
import axios from 'axios'
const rootComponent = {
render: () => h(App),
components: { App }
}
const app = createApp(rootComponent
浏览 1提问于2021-02-19得票数 1
回答已采纳
我试图设置一个单元测试如下：
import Vue from 'vue'
import ChangeTitleComponent from '@/components/ChangeTitleComponent'
import store from '@/vuex/store'
describe('ChangeTitleComponent.vue', () => {
describe('changeTitle', () => {
var com
浏览 2提问于2017-09-17得票数 0
回答已采纳
我有个奇怪的问题。我想访问created()钩子中的一些元素。具体地说:这就是我对refs对象的访问权限： created() {
console.log(this.$refs)
}
// returns:
{
bar: div.red.bar
content: div.name-description
description: p.description.dark
redContainer: div.red.red-container
sections: div.sections
浏览 15提问于2019-10-16得票数 2
回答已采纳
我在react导航中遇到了一个问题，错误消息“未定义的不是一个对象(计算'navigation.navigate')”。尝试通过另一个路由上的按钮调用屏幕时出错
组件代码：
export default function Estruturas({ title, display, navigation }) {
const [estruturas, setEstruturas] = useState([]);
useEffect(() => {
async function loadEstruturas() {
浏览 0提问于2020-07-08得票数 0
我有一个以dataModel作为输入的组件，在调用构造函数时，dataModel是未定义的。
<div class="container">
<dataViewer [dataModel]="data"></dataViewer>
</div>
组件
@Input() dataModel: DataModel;
// ..
constructor(private element: ElementRef) {
this.htmlElement = this.element.nativeElement
浏览 1提问于2017-07-08得票数 0
回答已采纳
你好，我正在学习反应js，我遇到了一个问题。当我试图使用react路由器返回到主页时，我会得到以下错误：
未定义TypeError:无法读取未定义属性的“推送”
下面是我的代码，正如您所看到的，我正在调用导航函数：
我的带有路由器的client.js：
如果我将this.props.router.push('/');替换为this.props.history.push('/');，它就能正常工作。有什么问题吗？
浏览 5提问于2016-05-06得票数 12
回答已采纳
1回答
我正在学习Angular2，并试图检查组件中的文本字段是否有效。我构建了一个名为MyUpload的组件，并在一个模态组件中调用它。在我的模型中，我试图验证其中的字段(myField)是否有效。我试过这样做：
<my-upload #upload [maxSize]="10000" [multiple]="true"></my-upload>
<textarea name="comment" ... ></textarea>
<button ...
[disabled]="f.f
浏览 1提问于2019-11-11得票数 0
当使用glVertexAttribPointer绑定属性索引时，当关联程序在所述索引处不包含属性时会发生什么情况？
行为是未定义的，还是完全忽略了该属性？
我已经对文档进行了相当广泛的搜索，并没有找到很多关于程序和动态属性绑定之间的链接的信息。
浏览 3提问于2019-09-23得票数 1
回答已采纳
在Vue 2.0应用程序中，假设我们有组件A、B和C。
A声明、注册和使用B
从A到B可以通过C吗？
就像这样：
<template>
<div class="A">
<B :child_component="C" />
</div>
</template>
在B中使用C。
<template>
<div class="B">
<C>Something else</C>
</div>
</t
浏览 3提问于2017-03-24得票数 64
回答已采纳
1回答
事件发射器模板未定义
、、、
我正在构建一个基于react的模板的web组件。当im调用时，该值将被发送，但它在组件上显示为未定义。
@Event() newModuleClicked: EventEmitter<any>;
handleClick(e) {
this.newModuleClicked.emit(e); //data is coming here when clicked
}
<ul class="portal-navigation__scrollable">
{this.dataNavigation.ma
浏览 1提问于2021-11-26得票数 0
回答已采纳
我有以下组件
@Component({
selector: 'app-models-sd-htmlview',
styleUrls: ['./sd.component.scss'],
template: `
<iframe id="htmlview" style="width:100%; height:200%;" [src]="iframe"></iframe>
`
})
export class HtmlViewComponent impl
浏览 4提问于2022-02-04得票数 0
如何在Angular 2中将服务中的变量作为全局变量，以便两个不同的组件可以访问和修改它？
public myMap : Map<string, string> = new Map<string, string>();
这是服务中的地图，我最初使用一个组件填充它。现在，在应用程序中运行了一段时间后，我需要使用不同的组件访问相同的已填充地图。我该怎么做呢？
当我使用另一个组件访问地图时，它显示为未定义。
浏览 32提问于2017-08-03得票数 8
回答已采纳
我想要得到这张地图的边界，并将其居中
我尝试使用getBounds()和getCenter()，但是它没有定义。
然后我找到了这个，但它说不能读取属性'leafletElement‘的未定义
谢谢你的帮助。
class FortMap extends Component {
state = {
lat: 51.505,
lng: -0.09,
zoom: 18,
}
componentDidMount(){
console.log(this.refs.map.leafletElement.getBounds);
}
re
浏览 0提问于2018-07-18得票数 7
回答已采纳
我想在通过DatePickers加载的部分视图上使用Telerik DatePickers和IntegerTextBoxes。在之后，我手动地将必需的JavaScript文件添加到ScriptRegistrar中：
Site.Master
.
.
.
<%= Html.Telerik().ScriptRegistrar().DefaultGroup(group => group.Compress(true).Combined(true)
.Add("telerik.calendar.js")
浏览 0提问于2010-11-09得票数 1
回答已采纳
所以在我的FromComponent里，我有一个FormGroup。我还有一个名为ReviewComponent的组件，它没有FormGroup。
我需要访问FromComponent的FormGroup....for示例(FromForm.controls.contact.value)中的数据。
我知道如何将常规变量传递给独立的组件，但是每当我尝试访问一个FormGroup时，它就只是一个未定义的变量。
import {
FormBuilder,
Validators,
ReactiveFormsModule,
FormGroup,
Contr
浏览 1提问于2017-06-01得票数 0
回答已采纳
2回答
我正在发送一组对象作为支柱。当我console.log(this.props)时，我得到了对象数组，但是当我试图将它赋值给一个变量时，它给了我
类型错误:忍者未定义
我就是这样送道具的
import React from 'react';
import Ninjas from './Ninjas';
class App extends React.Component {
state = {
ninjas:[
{name:"Ryu",age:"20",belt:"black",key:&#
浏览 9提问于2019-11-30得票数 1
回答已采纳
2回答
我正在尝试实现一个搜索栏，同时使用样式组件库进行样式化。我的问题是，如果我使用样式化的组件，被查询的值永远不会改变。这是我的密码
import styled from 'styled-components'
import React, from 'react'
const SearchBar = styled.input`
margin-top: 35px;
float: right;
`
class Header extends React.Component {
state = {
query: '',
}
浏览 0提问于2018-08-31得票数 0
回答已采纳
2回答
目前，我们正在使用以下方法加载app.js中的所有组件
Vue.component('ID', path-to-component);
这意味着，如果其中一个组件出现故障，所有组件都会中断。
那么，是否有一种方法可以将组件加载到我们需要的特定页面上？
我试着把它推到刀片中的一个堆栈上，但是它出错了
未定义ReferenceError: require未定义vuejs
我的代码是：
@push('scripts')
<script>
Vue.component('BookingPayments' , r
浏览 2提问于2018-11-27得票数 3
1回答
我是一个新的反应导航，我想通过“导航”作为一个道具，以便我可以使用它。因为当我试图在另一个compo中使用它时，它抛出了一条错误消息，上面写着“未定义的this.props.navigation等。”
所以这是我想要做的
goto={()=>this.props.navigation.navigate('ChatBox', {
avatarUrl: matches.avatarUrl,
name: matches.name,
navigation:
浏览 1提问于2018-10-10得票数 1
1回答
我有这样的代码：
...
import { match, RouteComponentProps } from "react-router";
import * as H from 'history';
interface oneRoute {
path: string;
exact?: boolean;
main: any;
}
interface ITestProps {
id: string;
}
class Test extends React.Component<RouteComponentProps<
浏览 4提问于2017-10-29得票数 3
嗨，我有一些传递道具到子组件的问题。问题是，将全局状态作为道具发送到子组件可以正常工作，但我不能将本地道具发送到子组件。
我不知道为什么，但它返回undefined。
const mapStateToProps =(state)=>{
return state.itemInfo
}
export class ItemInformationContainer extends React.Component{
componentWillUnmount(){
store.dispatch(hideItemInfo());
}
handl
浏览 1提问于2018-10-03得票数 0
在我的react应用程序中，我有一个主应用程序组件，在该组件中，我以componentDidMount方法从api获取数据，并将其保存在其状态中。然后，我将该状态传递给App中的另一个组件。但是，当我使用来自适当数据时，它显示为未定义。另一个奇怪的是，当我在应用程序组件的console.log方法中呈现它们时，首先我得到一个空数组，然后第二个数组中有数据。请帮助我这里的代码是这样的-
class App extends React.Component {
constructor() {
super();
this.state = {
浏览 2提问于2019-08-12得票数 0
1回答
角中不存在错误属性。
、、、
在组件类的开头初始化了一个数字类型，如下所示：
import { .....
@Component({
....
})
export class JhiLoginModalComponent implements OnInit {
a: number;
ngOnInit() {
this.method();
}
method() {
a=3;
}
我的测试课：
import {...
describe('LoginComponent', () => {
浏览 0提问于2018-05-04得票数 0
我在一个Create React app应用程序中有两个React组件，一个父组件(App.js)和一个子组件(QuoteMachine.js)。我在App.js中成功地应用了withStyles HOC，但是当我使用相同的格式在QuoteMachine.js中添加一个时，将this.props.classes.card作为属性传递给Material-UI组件实例会导致TypeError无法读取未定义的属性'props‘。在多个组件中使用withStyles HOC有问题吗？我应该改用ThemeProvider吗？
QuoteMachine.js：
import React from
浏览 4提问于2019-07-11得票数 0
回答已采纳
我需要使用speciesName从表中获取搜索列表，我试图在按enter键的同时获取数据，但是它给了我输入数据不工作(未定义)的信息。
如何在相同的输入中将搜索值传递给类型脚本方法？
类型脚本组件如下所示：
getSearchResult(speciesName) {
this.speciesName = speciesName;
this.speciesService.getSearchResult(speciesName).subscribe(result => {
this.speciesList = result.results;
}, error => this.
浏览 2提问于2021-01-06得票数 0
回答已采纳
1回答
我有一些组件可以在一个页面中一起呈现，也可以单独呈现，但它们需要相同的状态(订单信息)，这是一个包含所有订单信息的对象。每个组件都使用来自该状态的所需数据。
我使用redux来管理状态，所以当我在一个组件中更新状态时，所有其他组件都可以读取此状态更改并进行更新。
问题是这个状态来自API，它的初始状态是一个未定义的对象：
const initialState = {
orderInfo: undefined,
};
这是因为只有当客户浏览订单时，它才会有自己的状态。因此，每当客户导航到/dashboard/orders/:id/时，组件都需要从API获取数据。
我最初的想法是检查状态是
浏览 1提问于2020-05-29得票数 0
这是我和webpack的vue项目的一部分。
<template>
<div>
<p>notes is: {{notes}}</p>
<p>{{notes[0]}}</p>
<Card :note="notes[0]"/>
<Card :note="this.notes[0]"/>
</div>
</template>
<script type="text/javascript&#
浏览 1提问于2018-07-08得票数 0
1回答
当我在React中定义button时：
<Button ref="buttonRef" title="Button" onPress={this.buttonPressed}/>
它的onPress功能是：
buttonPressed(){
this.refs.buttonRef.setNativeProps({color:"#ffffff"});
}
我得到以下错误：
this.refs.buttonRef.setNativeProps不是一个函数。(在'this.refs.buttonRef.setNativePro
浏览 0提问于2018-05-20得票数 0
回答已采纳
import {theme} from "./themes";
const App = () => (
<ThemeProvider theme={theme}>
<ErrorBoundary showError>
<Provider store={store}>
<Router>
<switch>
<Route path="/page1" exact component={Page} />
浏览 1提问于2018-10-10得票数 4
1回答
新手从我那里钻了过去。我试图从数组中提取行并在屏幕上显示它们。我填充了数组，下面的代码片段可以工作：
return (
buildings.map((building) => {
return <div className="col-md-9">
{building.name}
但是，当我试图在语句中使用组件时，我会得到一个错误。这不管用：
return (
buildings.map((building) => {
return <div cl
浏览 4提问于2021-09-27得票数 0
回答已采纳
我有一个复杂的应用程序，有很多行，所以我想分裂文件在最大限度，以避免文件的思想行。
这是我的代码：
export default class Nav extends Component {
return(
<Navigator
initialRoute={ ... }
renderScene={ ... }
navigationBar={ <Navigator.NavigationBar routeMapper={ ... }/> }
/>
)
}
以下是我想要达到的目标：
export default class Nav
浏览 2提问于2017-03-14得票数 0
回答已采纳
2回答
我正在传递一个道具给我的一个视图，但是当我在控制台中打印结果时，它会把我作为未定义的，但在视图中它会打印我的id，因为未定义的我不能做请求/咨询这是代码：
export default {
props: ['idVideo'],
data: () => ({
videos: []
}),
created() {
//do something after creating vue instance
this.api = new ApiCanal10({})
this.getRelVideos()
},
methods
浏览 0提问于2017-10-29得票数 1
我的_id支柱在子模板中显示得很好，但是console.log(this._id)没有显示任何函数，甚至没有“未定义”--这是我的子模板：
<template>
<div>
LIST
{{ _id }} // OK , I CAN SEE IT
</div>
</template>
<script>
import axios from "axios";
axios.defaults.withCredentials = true;
export default {
name: "m
浏览 2提问于2019-11-26得票数 0
回答已采纳
下面是ListEmployeeComponent的代码
import React, { Component } from 'react';
import EmployeeService from '../service/EmployeeService';
class ListEmployeeComponent extends Component {
constructor(props){
super(props)
this.state = {
employees : []
}
浏览 15提问于2022-01-22得票数 0
2回答
我正在试验角度8和传递数据之间的组件。
子组件如下：
import { Component, OnInit, Input } from '@angular/core';
import { SelectService } from '../select.service';
@Component({
selector: 'app-dynamic-selects, test-dynamic-tag',
templateUrl: './dynamic-selects.component.html',
浏览 3提问于2020-03-03得票数 0
回答已采纳
4回答
遵循，我尝试以编程方式在页面上创建组件的实例。
主要的片段如下：
import Button from 'Button.vue'
import Vue from 'vue'
var ComponentClass = Vue.extend(Button)
var instance = new ComponentClass()
instance.$mount()
this.$refs.container.appendChild(instance.$el)
然而，我得到了两个错误：
我试图实例化的组件包含对存储的引用，这些引用不起作用："TypeError
浏览 1提问于2018-11-09得票数 6
回答已采纳
我一直在努力让contextMenu。
我想从ref.current获取offsetWidth和offsetHeight，但console.log打印未定义。
const ContextMenu: React.FC<ContextMenuProps> = props => {
const thisComponent = useRef(null);
const [isVisible, setIsVisible] = useState<boolean>(false);
let thisComponentHeight = null;
let thisCo
浏览 70提问于2019-08-12得票数 0
回答已采纳
我试图使用useState来更改样式组件中的显示类型。当尝试使用我的代码时，显示类型不会被更改，并且我的变量"displayType“是未定义的。
我试图更改我的setStyle()函数返回的内容，但是我开始看到这是一个更大的问题，我想更好地理解这个问题。
当我在index.js中将值打印到控制台时，一切正常。然而，当我尝试在displayType中使用StoreElements.js时，我就没有定义了
src/pages/store.js
const [displayType, setDisplayType] = useState("none");
浏览 9提问于2021-08-15得票数 0
回答已采纳
2回答
我目前正在使用自定义datepicker以'MMDD‘或'MMDDYY’格式输入日期，并将值设置为state，并在datepicker组件中用作受控组件。但是在表单提交时，datepicker值是未定义的。 请找到codesandbox中的代码，并纠正我在这个代码中做错了什么。 https://codesandbox.io/s/damp-haze-mmj80
浏览 51提问于2020-02-02得票数 0
回答已采纳
我是一个反应的新手-我得到了这个TypeError: Cannot read property 'temperature' of null，它不允许我将温度变量绑定到return()中的组件。在绑定之前，我可以在控制台中看到数据。代码：`类应用扩展React.Component {状态：{温度:未定义，城市:未定义，国家:未定义，湿度:未定义，描述:未定义，错误:未定义} getWeather = async (e) => { e.preventDefault()； const city = e.target.elements.city.value;
const cou
浏览 24提问于2019-03-25得票数 1
回答已采纳
1回答
我正在学习ReactJS，并在选中复选框时尝试console.log我的id。我尝试过多种方法来做到这一点，我要么得到一个错误，未定义，或null。当它呈现时，span标记确实有它们自己的id。如何从函数中引用它？
import React from "react";
import * as ToDoAction from "../actions/ToDoAction";
export default class ToDoLi extends React.Component{
constructor(){
super();
}
浏览 4提问于2016-11-08得票数 0
回答已采纳
在我加载页面时，出现了这样的错误：
错误TypeError:无法读取未定义的属性“attribut_id”
at eval (values.component.ts:132)
在Array.filter ()在SafeSubscriber.eval
在SafeSubscriber.__tryOrUnsub (Subscriber.js:243)
在SafeSubscriber.next (Subscriber.js:190)
Subscriber._next (Subscriber.js:131) at Subscriber.next (Subscriber.js:95)
MapSubsc
浏览 1提问于2018-09-05得票数 1
我正在试用laravel应用程序中的vue厨师插件，我就是这样做的
<template>
<div class="tranbg" v-if="first">
<div>hello</div>
<button @click="turnOff">ok</button>
</div>
</template>
<script>
export default {
data(
浏览 0提问于2018-11-15得票数 0
回答已采纳
6回答
我对VueJS相当陌生。有一个父组件，从中将数据传递给子和外孙。
我的孩子部件是这样的，
B.vue
import C from './c.vue'
export default{
props:['info'],
components:{
'c': C
},
created: function(){
this.getInfo();
},
methods: {
getInfo: function(){
conso
浏览 4提问于2017-11-27得票数 11
回答已采纳
运行render代码时，React有时会静默失败。然后就很难找出它出了问题的地方。
我在想，是否应该将render函数的所有代码都放在try {} catch(err) {alert(err)}中
这是一个很好的实践吗?或者我应该以不同的方式捕获和调试错误？
它没有显示错误的一种情况是，当我向一个实际上未定义的组件发送一些属性变量时，它试图获取该未定义变量的属性，如下所示：
<FormField form={this.props.form} />
然后，在FormField组件render函数中有以下代码：
var value = this.props.form[this.prop
浏览 0提问于2015-11-19得票数 1
我在app/View/Components中有一个名为OrderBox.php的刀片组件。它有几个公共属性，我可以从orderbox.blade.php模板文件中访问。
<x-orderbox
:id="$id"
....
></x-orderbox>
但是，在getShortTextByStatus($statusCode)组件文件中有一个公共函数，当我在orderbox.blade.php模板中调用该函数时，
{{ $get
浏览 1提问于2021-09-01得票数 3
2回答
所以我有这个自定义钩子，它从数据库返回一个对象数组，在它获得数据之前，返回值的值是未定义的。getDataByID(100).doc?.items -这将以数组的形式返回数据库中的项。如何确保返回值不是未定义的，然后将组件挂载到函数组件中？
浏览 71提问于2020-11-16得票数 0
回答已采纳
2回答
据医生说，
<input v-model="something">与以下内容相同：
<input
v-bind:value="something"
v-on:input="something = $event.target.value">
所以我试着做了下面的工作：
<input v-model='sample'>
<input v-bind:value='sample' v-on:input="sample = $event.target.value"
浏览 3提问于2017-03-21得票数 7
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
