尝试从作为道具传递的对象获取属性时出现未定义
当尝试从作为道具传递的对象获取属性时出现未定义的情况，通常是因为该属性在对象中不存在或未被正确定义。这可能是由于以下几个原因导致的：
- 属性未定义：对象中没有定义所需的属性。在访问属性之前，需要确保对象中存在该属性，并且已经正确定义。
- 属性拼写错误：可能是由于属性名称的拼写错误导致无法获取属性。请检查属性名称的拼写是否正确。
- 对象为空：尝试从一个空对象中获取属性会导致未定义的错误。在访问属性之前，需要确保对象已经被正确初始化。
- 异步加载数据：如果属性的值是通过异步加载获取的，可能会导致在访问属性时出现未定义的错误。在确保数据已经加载完成之前，需要进行适当的处理，例如使用回调函数或异步操作。
针对这种情况，可以采取以下解决方法：
- 检查属性是否存在：在访问属性之前，可以使用条件语句或对象的hasOwnProperty()方法来检查属性是否存在。如果属性不存在，可以采取相应的处理措施，例如提供默认值或给出错误提示。
- 确保对象已正确初始化：在访问属性之前，需要确保对象已经被正确初始化。可以通过在对象创建或赋值时进行检查，或者在访问属性之前进行空对象的判断。
- 检查属性拼写：检查属性名称的拼写是否正确，确保与对象中定义的属性名称一致。
- 处理异步加载数据：如果属性的值是通过异步加载获取的，需要在数据加载完成后再进行访问。可以使用回调函数、Promise、async/await等方式来处理异步操作，确保数据加载完成后再进行属性的访问。
总结起来，当尝试从作为道具传递的对象获取属性时出现未定义的情况，需要检查属性是否存在、属性拼写是否正确、对象是否已正确初始化，并适当处理异步加载数据的情况。
相关·内容
我有3个组件/页面 home，page1，page2，我从家里发送道具并打电话给page1
<Link
style={{ textDecoration: "none", color: "inherit" }}
to={{
pathname: "/page1",
Props: { categoryID: val.id, categoryName: val.name }
}}
/>;
然后，第1页在构造函数中获取这些道具并定义状态。
class BuyerItems extends Component{
浏览 2提问于2021-08-28得票数 0
回答已采纳
2回答
我尝试将用户输入的值从app组件传递到passTicket组件。我尝试调用props来传递此状态数据，但在尝试访问它时一直收到未定义的错误。我是个新手，如果有人能帮我弄清楚我的错误所在，那就太好了。这是我试图实现的一个示例。这是我的主要组件： class App extends Component {
constructor(props){
super(props);
this.state = {
ticket:"",
};
this.changeTicket = this.changeTicket.bind(this);
浏览 25提问于2019-02-21得票数 1
回答已采纳
1回答
我在StackNavigator中有一个TabNavigator。我不能在Tabs中的不同类中定义标头，因为TabNavigator没有标头(据我所知)。所以我试着在初始化StackNavigator的时候定义它。按钮出现在顶部，但按下它会出现重定向到未定义位置的错误。可能this.props.navigator.navigate部分包含错误，this没有引用我希望它引用的内容，但是我找不到正确的语法。 const NestedNavigator = createBottomTabNavigator ({
"route1" : {screen : Screen1,
}
浏览 11提问于2019-01-21得票数 1
回答已采纳
我正在尝试在我的React.js应用程序上实现React.js路由器，但是当我将路由器添加到我的程序中时，我就开始收到一个奇怪的错误。
ReactDOM.render(
<BrowserRouter>
<App />
<Route path="/" component={Headline}></Route>
<Route path="/economy" component={Economics}></Route>
</BrowserRouter&
浏览 2提问于2020-10-30得票数 0
回答已采纳
在我的react应用程序中，我有一个主应用程序组件，在该组件中，我以componentDidMount方法从api获取数据，并将其保存在其状态中。然后，我将该状态传递给App中的另一个组件。但是，当我使用来自适当数据时，它显示为未定义。另一个奇怪的是，当我在应用程序组件的console.log方法中呈现它们时，首先我得到一个空数组，然后第二个数组中有数据。请帮助我这里的代码是这样的-
class App extends React.Component {
constructor() {
super();
this.state = {
浏览 2提问于2019-08-12得票数 0
1回答
我已经创建了一个 <router-link :to="{ name: 'casa', params: {casa: item ,codCasa:item.cod_Casa} }">{{ item.cod_casa }}</router-link> 但是现在path出现了问题。不能有明确的url。 item是一个对象，而url是http://localhost:8080/casa/%5Bobject%20Object%5D 在我拥有的路线中 {
path: "/casa/:casa",
name:
浏览 17提问于2019-03-08得票数 0
尝试在React组件中呈现来自的数据。它在第一次呈现时有效，但如果我离开页面或刷新，coin.market_data是未定义的。我还尝试将coin传递给useEffect()依赖项数组，但没有成功。
import React, { useEffect, useState } from "react";
import axios from "../utils/axios";
import CoinDetail from "./CoinDetail";
function CoinPagePage() {
const [coin, setCoin
浏览 18提问于2021-06-09得票数 2
回答已采纳
1回答
我正在尝试使用解构从对象中获取name属性，但返回的错误显示'cannot read property name of undefined‘。
// Get genres for given movie
getGenres = (genreIds, genres) => {
return genreIds.map(genreId => {
const filteredGenres = genres.filter(genre => genre.id === genreId);
const {
浏览 0提问于2019-01-29得票数 0
我有一个名为page的组件，他从redux接收状态，我想在视图上传递一个道具normaly来改变他的通信方式取决于页面a的名称，道具从来没有出现过，我已经尝试过将该组件传递给类并完成工作。
代码在这里：
<Provider store={store}>
<div className="row text-center">
<Paginate mode="search" />
</div>
<div classNa
浏览 14提问于2020-03-10得票数 0
回答已采纳
对于使用React路由器获取当前url的路径名最有效的方法(使用browserHistory)，不同来源之间似乎存在一些分歧。下面是我的提供程序和路由的片段：
ReactDOM.render(
<Provider store={Store}>
<Router history={browserHistory}>
<Route path="/tools/customer-lookup" component={CustomerLookupApp} />
浏览 1提问于2016-11-03得票数 1
回答已采纳
在我的操作文件中我创建了一个fetchMethod
export const requestEmbedToken = () => (dispatch) => {
return axios.get('http://localhost:7071/api/getTokens')
.then(response => {
console.log("token embed", response)
})
}
app.js
从‘./redux/action’导入{ requestEmbedTo
浏览 4提问于2020-10-02得票数 0
2回答
当我尝试console.log(道具)时，它给了我一个空对象。它作为{}返回。此外，在控制台中，当我试图编写道具时，它给出了it 410:1未定义的ReferenceError: props，虽然它在代码中定义为:1:1。
import React, { useEffect } from 'react'
import { useDispatch } from 'react-redux';
import { getProductsBySlug } from '../../actions';
import { Layout } from '.
浏览 8提问于2022-05-30得票数 -2
回答已采纳
2回答
我不明白为什么这不起作用：
-spec.js
it.only('passes props to children', () => {
const state = {
company: {
name: 'Company A'
}
},
store = fakeStore(state),
container = <HomePageContainer store={store} />;
const homePageContainer =
浏览 2提问于2017-02-22得票数 0
我正在尝试从jQuery中的td元素中获取表jQuery。这就是我想要的：
var element = $('td').filter(function() {
var Text = $(this).contents()[0].textContent.trim();
return parseInt(Text, 10) == some_Textvar;
});
var parent = element.parentNode;
var index = parent.rowIndex;
我得到了以下错误
未定义的TypeError:无法读取未定义的属性“rowInd
浏览 2提问于2017-03-02得票数 1
回答已采纳
1回答
如何使用数据属性与材料设计反应？
、、、、
我最近开始使用，但我刚刚看到数据--某个字段确实将值传播到dataset映射。
示例：
<Input data-role=‘someValue’ onChange={this.onChange} />
onChange = e =>{
const role = e.target.dataset.role
const role2 = e.currentTarget.dataset.role
}
onChange处理程序中的两个角色都是未定义的。如果我将输入标记更改为常规的html输入，则不会发生这种情况。
有什么想法，为什么材料
浏览 1提问于2019-03-02得票数 18
回答已采纳
1回答
名称支柱未定义
、、
我使用的是redux表单，我发送了TextField的资料-用户界面作为支柱，以领域的还原-形式.但其他的房产正如期而至。
<Field
id="firstName"
name="firstName"
floatingLabelText="Username"
errorText={this.state.firstNameError}
component={TextInputField}
/>
下面代码它是TextInputField组件
import React from 'react&
浏览 0提问于2018-01-31得票数 0
回答已采纳
我有一个包含数组的状态，然后将数据从状态抛出到子组件，从子组件我有一个动态卡，所以我再次向卡组件抛出数据，我如何在其他组件中使用卡组件？我尝试在其他组件中使用组件卡，但属性未定义
this.is我的事件组件
class Events extends Component {
constructor(props){
super(props)
this.state = {
data:[
{id:1, title:'Kelebihan Ford Everest 1', type:'Berita 1', role:'Ad
浏览 0提问于2019-10-22得票数 1
您好，我是新的反应和redux，我试图访问存储从componentDidMount方法，但总是给我未定义，当控制台的状态从mapActionToState第一次给我未定义，然后给我真实的状态 import React, {Component} from 'react'
import {connect} from "react-redux";
class UserProperties extends Component {
constructor(props) {
super(props);
this.state = {
tab
浏览 22提问于2019-03-21得票数 0
在我的mapStateToProps函数中，我将idToken和accessToken设置为存储在状态中的值。这是可行的，因为我已经能够从组件中引用这些值。在mapDispatchToProps中，我尝试在我的操作中使用这些道具作为参数。但是，ownProps是一个空对象。为什么它没有idToken和accessToken
容器：
import { connect } from 'react-redux'
import { toggleAddQuestionModal, fetchFriends } from '../actions'
import AddQue
浏览 5提问于2016-04-10得票数 19
回答已采纳
我很难理解神奇的参数，它突然出现在示例中作为表示组件的第一个参数。
let AddTodo = ({ dispatch }) => {
/* Omitted */
}
AddTodo = connect()(AddTodo)
到目前为止，我的理解是第一个AddTodo被认为是表示组件，后者是容器组件
在这种情况下，表示组件似乎被注入了dispatch作为第一个参数。不幸的是，我在回顾之后感到困惑，并意识到的情况并非如此。
const Todo = ({ onClick, completed, text }) => (
/* Omitted */
)
Todo.p
浏览 5提问于2016-09-30得票数 3
1回答
我有一些组件可以在一个页面中一起呈现，也可以单独呈现，但它们需要相同的状态(订单信息)，这是一个包含所有订单信息的对象。每个组件都使用来自该状态的所需数据。
我使用redux来管理状态，所以当我在一个组件中更新状态时，所有其他组件都可以读取此状态更改并进行更新。
问题是这个状态来自API，它的初始状态是一个未定义的对象：
const initialState = {
orderInfo: undefined,
};
这是因为只有当客户浏览订单时，它才会有自己的状态。因此，每当客户导航到/dashboard/orders/:id/时，组件都需要从API获取数据。
我最初的想法是检查状态是
浏览 1提问于2020-05-29得票数 0
2回答
我似乎想不出如何在react本机中使用类型记录传递变量，我已经尝试过params，但是它说未定义的对象不是对象(计算'navigation.props.value')。
下面是密码。
import {useNavigation} from '@react-navigation/core';
const navigation = useNavigation();
.......
<TouchableOpacity onPress={() => navigation.navigate('NewsDetails', {value: &#
浏览 3提问于2022-04-02得票数 0
3回答
我是react的新手，当我使用react-router时，我遇到了一个问题，并写下以下代码：
var router = (
<Router history={browserHistory}>
<Route data = {linksData} path = "/monitor/" component = {App}>
<Route path = "category/:categoryId" component = {Category}>
</Route>
</R
浏览 5提问于2016-04-29得票数 0
我有包含两个子组件的父组件。 <Parent>
<Child1></Child1>
<Child2></Child2>
</Parent> 在Child2组件中，我有一个Ul (无序列表)，我在其中指定了ref="mylist"。 <ul ref="mylist" className="list"><li>Test1</li><li>Test2</li><li>Test3</li></
浏览 22提问于2018-12-18得票数 0
有两个StackNavigator对象，在TabNavigator中只有很少的屏幕。如何从App.js -> TabNavigator -> StackNavigator ->屏幕传递道具？
下面的代码会生成错误，说明只能呈现一个路由器。
const SettingsStack = createStackNavigator({
Settings: {screen: props => <SettingsScreen {...props} screenProps={{is_authenticated: props.is_authenticated}}/> }
浏览 4提问于2018-06-18得票数 2
回答已采纳
API返回如下所示的对象数组：
[
{
"id": 1,
"odd": 7,
"even": 42
},
{
"id": 2,
"odd": 1,
"even": 2
},
{
"id": 3,
"odd": 31,
"even": 6
},
{
浏览 9提问于2022-03-14得票数 0
回答已采纳
我正在尝试将我的JSON数据(JSON字符串数据)传递给Litelement中的子组件。它在Chrome上工作。但在IE边缘浏览器中未定义
<parent-comp>
<child-comp myJsonData=`${JSON.stringify({ code: '123',name: 'xyz'})}`>
</child-comp>
</parent-comp>
将这个myJsonData应用到更新的子生命周期中。但是在IE中获取作为未定义的的值。
浏览 1提问于2019-12-24得票数 0
回答已采纳
2回答
我的道具在哪里？
、、、、
这是我第一次用这个堆栈组装一个新的应用程序。以前，我在另一个已经安装了管道的地方做过一个继承的工作。我的道具没有定义，我需要知道原因。也请提出建议。以下是简化的代码：
index.js
const store = createStore(rootReducer);
render(<Root store={store} />, document.getElementById("root"));
Root.js
const Root = ({ store }) => (
<Provider store={store}>
<Router
浏览 1提问于2018-08-09得票数 0
最近，我学习了一些基本的Redux，并复习了关于他们的文档的教程。
我有一个React表示类组件，我希望它也是它自己的容器组件，名为Word。
我希望它的道具价值来自Redux商店。我成功地从存储的初始状态获得了它的道具的初始值，但是当我尝试分派一个操作时，它的属性wordParts返回undefined。
这是Word的结构
Word : {
wordParts : <array>
stem : <object> //I'm using a string for now for testing
}
这是商店的结构：
store : {
word :
浏览 1提问于2019-03-30得票数 0
回答已采纳
我不太确定为什么会出现这个错误。
class ContentProcessing extends Component {
constructor(props) {
super(props);
this.state = {content: currentData};
this.setData = this.setData.bind(this);
}
setData(data) {
this.setState({
content: data
});
}
浏览 1提问于2018-04-01得票数 3
我在搜索时尝试导航到另一个组件，我需要获取一个数组或firesearch函数的结果，并在函数被触发时将它们发送到主应用程序组件。
我试图推送历史，但我没有得到我需要的道具，我试图使用路由器，但我得到的推送是未定义的
更新:在路由中发送时，repos组件似乎没有从addform组件收到repos列表，位置未定义我得到错误×TypeError:无法读取未定义的属性'state‘
对此有什么帮助吗？
下面是子组件(addform)：
state = {
username: null,
repos: []
}
construct
浏览 0提问于2020-06-03得票数 0
在React中，我尝试使用history.push传递路径名和另一个参数。当它执行时，应用程序重定向到指定的页面，但状态未定义，因此我无法获得其他参数。
<Route path='/main' exact component={Main} />
import { useHistory } from "react-router-dom";
var history = useHistory();
function handleSubmit(event) {
event.preventDefault();
history.push(&#
浏览 3提问于2021-09-12得票数 2
回答已采纳
在JSX中使用spread与诸如props这样的对象进行交互，似乎没有输出我所期望的结果。
<Text {...this.props} />
它似乎被呈现到style="foo"中，在那里它应该是style:"foo"作为。我在任何地方都找不到这份文件。我对react完全陌生，我正在尝试理解语法，并想知道react是否在内部做了一些没有文档的事情。
一个简单的测试突出了我的困惑：
const x = {...{test:1}}.test;
alert(x);
警醒
1
这肯定不会编译：
<Text test: 1 />
浏览 0提问于2018-10-27得票数 2
回答已采纳
class homeNotLoggedIn extends React.Component {
componentDidMount() {
function logout(){
localStorage.clear()
location.reload()
}
}
render() {
return (
<div>
<div className="nav_bar">
浏览 6提问于2021-07-21得票数 0
我对js的反应是非常新的，我试图做一些非常简单的事情，当用户在文本中键入时，在它顶部的p标记中输入的文本应该会随着用户的输入而改变。以下是相关代码：
index.js
import { render } from 'react-dom'
import App from './components/App'
var Name = React.createClass({
getInitialState: function() {
return {name: ''}
},
changeName: function(event) {
t
浏览 2提问于2016-08-20得票数 1
回答已采纳
考虑到.../pages/_app.js，中下面的代码，组件是从当前页面导出的组件。
因此，假设您访问了.../pages/about.js，那么.../pages/about.js中导出的组件将是.../pages/_app.js中组件的值。
现在，当您控制台记录pageProps时，将显示一个空对象。
例如，我的问题是如何在.../pages/about.js中设置pageProps值。
.../pages/about.js
const About = () => {
return <p>About Page</p>
}
export default Ab
浏览 2提问于2021-04-06得票数 3
回答已采纳
1回答
我有以下代码：
const cEditor = (onUpdate, props) => (<SelectEditor onUpdate=(onUpdate) {...props} />);
{...props}正在做什么？它似乎是在把道具传给组件。这个语法是什么意思？
浏览 3提问于2017-06-03得票数 2
回答已采纳
2回答
我想知道如何在Onclick事件中更改组件，到目前为止，我遇到了这些，但它们都没有工作。
1)this.props.history.push('/')
导致此错误:无法读取未定义的属性“push”。
2)this.context.router.history.push('/')
导致此错误:无法读取未定义属性的“历史记录”。
3)this.context.history.push('/')
导致此错误:无法读取未定义的属性“push”。
4)using BrowserRouter
这在react v4中是不可用的，所以这不是一个解决方案。
5)c
浏览 5提问于2018-08-11得票数 1
回答已采纳
3回答
你能解释一下这条线是什么吗？道具和{...props}是做什么的？
<Route exact path='/' render={props => <Home {...props} />} />
浏览 0提问于2018-11-04得票数 2
3回答
我正在构建一个依赖于json文件的网站来获取其所有信息。在我的app.js中，json在我的console.log()中正确显示，但是当我试图将它传递给我的功能组件时，它给了我一个未定义的信息。
在app.js中
<Route
exact
path="/puppies"
render={props => (
<Puppies {...props} propdata={this.state.propdata} />
)}
/>
这看起来很好，但是当我试图将它映射到组件中时，它会告诉我它的未定义。
function Puppie
浏览 11提问于2020-09-06得票数 0
回答已采纳
我正在尝试制作将props和state结合在一起的组件，这样实际的视图只需要担心从props获取数据。在下面的代码中，我尝试使用扩展运算符(可能是错误的)
class CombinePropsWithStateComponent extends React.Component {
...snip...
render() {
return(<View {...props, this.state}/>);
}
}
浏览 1提问于2016-03-17得票数 1
回答已采纳
我有一个关于将对象从类组件传递到函数组件的问题。在类component中，我从一些API中获取了一个对象，此时一切正常，但是当我尝试在函数组件中传递该对象时，会显示如下所示 未定义 当我初始化值时(使用钩子) 示例： const objectRecivedFromApi = [{name:"Jhon", age:25}, {name:"George", age:29}, {name:"Samantha", age:30}]
class ParentComponent extends Component {
state={
allDa
浏览 42提问于2021-03-02得票数 2
回答已采纳
2回答
我正在努力用react/redux做任何事情。
我的最后一个挑战之一是将一些数据从子组件传递到父组件。我无法通过调用parentComponent.props.children.props获得子数组(我还尝试使用React.Children.toArray将子数组转换为props )，然后我找到了读取React Router附带的一些数据的特定问题的解决方案。
通过在父组件中调用this.props.location.pathname，我设法找到了子组件。
我有一个如下的路由结构
<Router history={history}>
<Route path=
浏览 3提问于2016-10-26得票数 1
1回答
在VueJS组件中设置从Laravel Controller传递到视图的PHP变量时出现问题。
下面是返回视图和数据数组的控制器代码。
public function showUser($username)
{
try {
$accountSid = Auth::user()->account_sid;
$user = $this->webrtcUser->retrieveByUsername($accountSid, $username);
if(count($user)) {
return v
浏览 6提问于2017-02-19得票数 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
回答已采纳
我想按照以下链接执行连续流程，以更新aws IVS流的元数据。 我已经使用useEffect钩子进行了管理，但它没有更新值，并抛出了未定义的错误。 https://codepen.io/amazon-ivs/pen/XWmjEKN?editors=0011 function AppComponent(props) {
const [metaData, setMetaData] = useState(null)
useEffect(() => {
const data = props.metadata
const initData = async () =&g
浏览 16提问于2021-04-29得票数 1
回答已采纳
1回答
我是一个新的反应导航，我想通过“导航”作为一个道具，以便我可以使用它。因为当我试图在另一个compo中使用它时，它抛出了一条错误消息，上面写着“未定义的this.props.navigation等。”
所以这是我想要做的
goto={()=>this.props.navigation.navigate('ChatBox', {
avatarUrl: matches.avatarUrl,
name: matches.name,
navigation:
浏览 1提问于2018-10-10得票数 1
3回答
我使用const来显示组件。现在，当我对const中的按钮使用react导航时，我看到这个错误:未定义的不是一个对象(计算'_this.props.navigation.navigate') 我尝试将navigation={this.props.navigation}添加到按钮以允许禁烟，但不起作用。 const WomenTab = () => (
<View>
<Button onPress={() => {
this.props.navigation.dispatch(St
浏览 16提问于2019-02-08得票数 2
回答已采纳
1回答
样式化Vuetify选择器
、、、、
选择器的Vuetify组件是：
<v-select
:items="items"
label="Standard"
></v-select>
但当选择器处于活动状态时，会出现许多嵌套组件(在检查时)，例如，下拉菜单本身menu__content。我该如何设计它的样式呢？对于“可见”的Vuetify组件v-select，我可以手动添加一个类，并直接在css中设置它的样式。但是，我不能对隐藏的组件执行此操作。
我尝试使用检查给定的类".menu__content“设置样式，但似乎不起作用：。
如何在css中手动设置这些组件的样式？关于
浏览 7提问于2018-08-07得票数 8
回答已采纳
4回答
未显式声明的Vue道具
、、、
我正在尝试一些类似于redux-form的东西，但在Vue & with中。基本上，它应该使表单的处理更加简化，并使您编写更少的样板。
我遇到的问题是，当我试图将道具动态地从一个临时组件传递给一个组件时。我不太清楚该怎么做。在“反应”中，您只需做这样的事情：
<VfField unknownPropA="abc" unknownPropB="123" name="test" />
在VfField.js中：
export default ({name, ...props}) => <div name={name}&
浏览 12提问于2017-03-03得票数 4
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
