数据在reactjs上显示为未定义
在ReactJS中，数据在组件上显示为未定义通常是由于以下几个原因造成的：
基础概念
ReactJS是一个用于构建用户界面的JavaScript库。它使用组件来构建复杂的UI。组件可以从它们的属性(props)或状态(state)中获取数据。如果数据在这些地方没有正确定义或传递，就可能出现未定义的情况。
相关优势
- 组件化：React允许你创建可重用的组件，这使得代码更加模块化和易于维护。
- 虚拟DOM：React使用虚拟DOM来提高应用的性能，因为它减少了实际DOM操作的次数。
- 单向数据流：数据通过props从父组件流向子组件，这种单向数据流使得数据管理更加清晰和可预测。
类型
- Props：从父组件传递到子组件的数据。
- State：组件内部的数据，可以通过setState方法进行更新。
应用场景
- 单页应用(SPA)：React非常适合构建复杂的单页应用，因为它可以高效地更新和渲染UI。
- 动态内容展示：当需要根据用户交互或其他数据源动态改变页面内容时，React提供了强大的工具。
为什么会出现未定义
- 数据未正确传递：如果你尝试从一个组件访问另一个组件的数据，但没有正确地通过props传递，那么数据就会显示为未定义。
- 异步数据获取：如果你在组件挂载后异步获取数据（例如，从API），在数据到达之前尝试访问它可能会导致未定义。
- 初始状态未设置：如果组件的state在初始化时没有正确设置，那么在第一次渲染时尝试访问这些state值可能会得到undefined。
如何解决
- 确保数据正确传递：
- 确保数据正确传递：
- 确保数据正确传递：
- 处理异步数据：
- 处理异步数据：
- 初始化状态：
- 初始化状态：
参考链接
确保在处理数据时遵循这些最佳实践，可以避免在ReactJS中出现未定义的数据问题。
相关·内容
2回答
所以我有这个自定义钩子，它从数据库返回一个对象数组，在它获得数据之前，返回值的值是未定义的。getDataByID(100).doc?.items -这将以数组的形式返回数据库中的项。如何确保返回值不是未定义的，然后将组件挂载到函数组件中？
浏览 71提问于2020-11-16得票数 0
回答已采纳
1回答
背景：
以下AJAX代码成功工作(ReactJS + JQuery frontend, PHP backend)。
const data = {request_type:"load_data", start:1, end:50};
$.ajax({
type: "POST",
url: "http://localhost/site/server.php",
data: data,
dataType: "json",
success:
浏览 1提问于2018-09-02得票数 0
回答已采纳
我有啤酒列表页面，然后点击任何项目打开详细信息页。
“数据在详细信息”页被传递。
<Link to=“{pathname:’beerDetails’,state:{selectedbeer:selectedbeer}}/>
在详细信息页
this.props.location.state在刷新详细信息页时未定义
在ReactJS中使用ReactJS时，在页面刷新时未定义this.props.location.state，但当使用browserRouter时页刷新保留数据。
浏览 2提问于2018-09-14得票数 1
2回答
我正在开发一个ReactJS & Redux应用程序。在某种程度上，我有一个元素列表(注释)，每个元素都有一个数组(子任务)。我想显示所有元素，并为每个元素显示它们的数组的内容。
我试过这个：
render(){
return(
<div>
<h3>{this.props.match.params.user}'s board</h3>
<Link to={`/settings/${this.props.match.params.user}`}>
浏览 0提问于2018-03-04得票数 4
回答已采纳
跟随ReactJS教程从他们的网站。
var Comment = React.createClass({
render: function() {
return (
<div className="comment">
<h2 className="commentAuthor">
{this.props.author}
</h2>
{this.props.children}
</div>
);
}
})
浏览 3提问于2015-11-26得票数 0
回答已采纳
我有一个需求，需要通过对服务器的ajax调用加载数据，然后将数据传递给reducer，以便通过props呈现页面。
但是我看到ajax调用中的数据显示为未定义。
function getInitData(url) {
axios({url: url, timeout: 20000, method: 'get', responseType: 'json'})
.then(function(response) {
console.log(response.data.results)//--DATA DISPLAYED
浏览 0提问于2017-03-19得票数 0
2回答
最近我的遇到了一个奇怪的问题。我试图解析一个包含数据数组的JSON对象。数据如下所示：
{“地点”：“旧金山”、“国家”：“美国”、“作者”：{“名称”：“木兹”、“标题”：“从星星上看”}、“年份”：“2018年”、“地点”：{“价格”：“免费”、“地址”：“地址”}、{“价格”：“10美元”、“地址”：“博物馆”}}
数据包含多个数组，如我刚才展示的作者示例所示。我有一个函数从URL中获取这些数据。我在componentDidMount中调用了这个函数。该函数接受数据，即responseJson，然后将其存储在我使用setState设置的调用结果的空数组中。在我的状态下，我的结果是：[]。
浏览 1提问于2018-03-18得票数 0
回答已采纳
我是新的反应，所以我只是尝试从我的wordpress网站API的数据。我得到了一个一般的博客文章，它将显示this.state.post.link很好，但没有任何呈现的数据。
import React from 'react'
export default React.createClass({
getInitialState: function () {
return {
post: {},
}
},
componentDidMount: function () {
var _this = this;
$.get(
浏览 7提问于2017-04-12得票数 1
回答已采纳
1回答
在我的react应用程序中，模块页面组件没有呈现，这是当我加载组件时接收到的错误。在这个组件中，我尝试从firebase实时数据库读取数据，然后将其显示在页面上。
未定义的ReferenceError:初始化未定义
我也会得到这个错误。
未明错误:ModulePage(.)：呈现时没有返回任何内容。这通常意味着缺少返回语句。或者，若要不呈现任何内容，请返回null。
下面是模块页组件的代码
import Header from './header.js';
import Footer from './footer.js'
import &#
浏览 0提问于2022-04-06得票数 -1
我不明白，在控制台中，我看到了我的api数据(10个对象的数组)，但是如果我在保存文件时访问"data.data.length“，它就能工作(显示号: 10在控制台中)，但是当我刷新浏览器时，会出现错误(Uncaught:无法读取属性‘长度’的未定义)。
我还发现当我的页面刷新时，它首先是console.log“未定义”，然后是我的10个对象的数组api数据……
我太迷茫了，我做错什么了？
import React, { useState, useEffect } from 'react';
import '../App.css';
import axi
浏览 2提问于2021-07-02得票数 0
回答已采纳
我已经在react组件构造函数中定义了一个空数组，我希望将它与来自API调用的json响应数据一起赋值 class Grid extends Component {
constructor(props) {
super(props);
this.state = {
blogs : []
};
} 我调用componentDidMount方法来加载这个组件上的数据，在这个组件中，我使用setState赋值 componentDidMount(){
Axios.get("/api/blogs").then(response =&g
浏览 10提问于2020-01-30得票数 0
回答已采纳
3回答
如何在reactjs上调用输入值
、、、、
这是我在react上的表格。我需要获取输入的值，但每当我检查网络时，以下内容未定义，请帮助我添加数据，但为空
<td>Name</td>
<td>
<input type="text"
value={this.props.Employee_Name}
onChange={(e) => this.handleChange(e)}
/>
</
浏览 2提问于2017-05-19得票数 0
1回答
以下代码使用React在网页上显示图像列表：
this.searchResultsList = this.searchResults.map(function(photo){
return <div className="dataSetBox" key={photo.toString()}><img src={photo} alt="Image" height="350" width="450" margin="15px" border= "10" onClick={()
浏览 0提问于2018-03-07得票数 0
回答已采纳
4回答
我有mainPrice对象：
client_type: "individual"
large_car: {100: "3", 200: "2.5"}
medium_car: {100: "3", 200: "2.5"}
small_car: {100: "2.5", 200: "2.5"}
x_large_car: {100: "3", 200: "2.5"}
xx_large_car: {100: "3", 200: "2.5
浏览 1提问于2021-07-06得票数 1
回答已采纳
我正在获取未定义的密钥码。
我需要禁用空格键，同时输入密码，但我得到的keyCode作为未定义。
blockSpace(e) {
e.persist();
const key = e.keyCode;
console.log("key", key);
if (key === 32) {
e.preventDefault();
}
}
上面的console.log("key"，key)给出的是未定义的
<GenericInputBox onChange ={this.blockSpace} />
浏览 19提问于2019-11-28得票数 1
回答已采纳
2回答
我有这样的代码，我只是试图显示Json数据，但它返回的是未定义的
var dataW = [
{
empAverage:3,
reviewerAverage:4,
stdAverageOfTask:1
}
]
var ReviewCalculator = React.createClass({
getInitialState: function() {
return {data: dataW};
浏览 4提问于2016-05-17得票数 1
回答已采纳
我用Reacti16.2.0创建了一个简单的应用程序，当我在IE9上执行/运行它时，它会显示控制台错误“Set”或“Map”是未定义的。
浏览 2提问于2018-01-30得票数 2
回答已采纳
2回答
我想要做的是，当页面被加载时，它应该从parse.com数据库中提取所有数据并显示在页面上，并且我希望在完成查找请求之后呈现我的组件。
下面你可以看到我的代码
var Ap = React.createClass({
render: function(){
Parse.initialize("mSWrLtmIHQdh8CNGk14fLbnK4gaVDbgvjw1zTeCT", "qKDkELvVpvgkuDDZzGK2pdP5o69LBDjWaRI2XfUb");
var GameScore = Parse.Object.ext
浏览 2提问于2015-07-23得票数 1
回答已采纳
当在reactjs中有任何无效的支柱类型时，我们通常会在控制台上得到警告。但是我想向开发人员或用户显示一个错误，这样就清楚了，用户需要在优先的基础上修复它。是否有任何方法在主屏幕上而不是控制台上抛出错误？
原因是，在我的代码中有一个未定义的对象数组，因为它没有被传递，而且我已经在proptypes中应用了一个检查，但是它出现在控制台中。我需要某种类型的弹出，以便用户获得一个清晰的图像，数据是不可用的。
而不是下面的屏幕：
浏览 0提问于2020-06-13得票数 2
回答已采纳
所以我在ReactJS上有问题。我正在尝试用JavaScript制作简单的下拉列表。(不需要编写CSS示例来生成下拉列表。)我需要它在js，因为我会有延误))。
我的代码是：
import React, {Component} from 'react';
class Header extends Component {
constructor(props) {
super(props);
this.dropdown = React.createRef();
}
handleMouseOver = e => {
e.preventDefault();
浏览 1提问于2018-08-23得票数 0
回答已采纳
1回答
嵌套函数不能在ReactJs中工作。但是它在正常的Javascript中工作。
它显示了这个错误。
未定义的TypeError:无法设置未定义的属性“getWlc”
如何在ReactJs函数中编写嵌套函数
function ldViewLayer() {
this.getWlc = function() {
alert('Try Alerts on Babel');
}
this.getWlc();
}
ldViewLayer();
浏览 7提问于2017-02-20得票数 0
回答已采纳
3回答
我试图编译的应用程序不是用外部jquery编译&它的相关JS文件。当我试图将这些文件链接到ReactJS应用程序中的HTML页面时，它会抛出以下错误。
错误是：
“定义”未定义，无-undef。
此错误来自jquery.js文件，它本质上是一个外部文件&显示此错误的行是：
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(['jquery'], factory);
浏览 0提问于2018-10-14得票数 13
回答已采纳
1回答
我很难弄明白为什么这不管用。我创建了一个下拉按钮，其中填充了我的用户或数组。但是，它存在于组件<DropDown/>中。
我想在下拉列表中将选定的用户传递给我的组件。我考虑使用通量(Altjs)与我的组件进行通信。
在我的UserStore里
this.selected = "";
this.bindListeners({
handleSelected: UserActions.GET_SELECTED;
})
handleSelected(data) {
this.selected = data;
}
在useraction中，我只需声明以下操作
get
浏览 3提问于2015-07-29得票数 0
回答已采纳
我是reactJS的新手。我有一个JSON文件，如下所示：
我想要提取数据并显示每个帖子及其注释，用户谁评论和创建时间，并显示它与JSX使用地图功能。因此，我在状态中声明了一个名为items的空数组，并将所有这些数据放入其中，并试图浏览它，但我得到了以下错误：
×
TypeError:无法读取未定义的属性“数据”
这是我的密码：
render() {
return (
<div>
<h1>Hello World !!!! </h1>
<ul>
{ this.s
浏览 0提问于2020-05-04得票数 0
回答已采纳
我刚接触过ReactJ，有这个问题，现在我觉得有点难以理解。
我有一个组件，它调用XML对象，这个XML对象后来被解析为JSON对象，然后传递给其他组件，以便对它进行排序。现在，我无法正确地访问第二个组件上的JSON。
当我尝试做this.props.files.map时，它说地图是没有定义的。
这是我传递属性的父组件呈现方法：
render() {
return (
<div>
<List files={this.convertToJson()}/>
</div>
)
}
我收到的
浏览 2提问于2017-10-03得票数 2
回答已采纳
2回答
我有反应成分。当用户进行表单选择时，它检索以下对象(对象的内容因所选内容而异)：
数据
jsonObj={
"name":"main",
"type":"meat",
"values":[
["chicken","Roast chicken with vegetables"],
["beef","Beef and Yorkshire pudding"]
]}
期望结果
以下是我希望在呈现时在屏幕上显示的内容：
<di
浏览 7提问于2020-04-08得票数 2
回答已采纳
我有一个映射函数，它应该从我创建的列表中获取数据并显示给用户，但是每当我尝试这样做时，它会给我一个类型错误，下面是我的映射函数：
{product.map((item, idx)=>
<div key={idx}>
<h3 className='productName'>{item[idx].name}</h3>
<div className='productImageContainer'>
浏览 6提问于2020-10-05得票数 0
回答已采纳
我正试图在ReactJS中构建一个查找附近餐馆的应用程序，并且在下面这个命令的第一次运行时显示数组数据时遇到了问题。
结果是，第一次用axios获取数据时，它只加载位置。第二次获取数据时，它还在接口上呈现数组数据。
我认为问题在于我在这个函数中运行的命令的顺序，在第一次运行时，它试图获取未定义的lat & lng，然后在第二次在相同的会话中运行它之后，它将根据函数的上一次运行所获取的lat & lng来呈现它。
下面是代码：
currentLocationOnClick = async () => {
let { lat, lng } = this.state;
浏览 1提问于2020-04-25得票数 0
回答已采纳
我得到一些信息，从一个琐事应用和设置我的状态分别。
componentDidMount(){
axios.get('https://opentdb.com/api.php?amount=50').then( response =>{
for(var key in response.data.results){
this.setState( prevState => ({
questions: [...prevState.questions, response.data.results[key].question],
answers: [...prev
浏览 1提问于2018-12-01得票数 2
回答已采纳
我的目标是从像{id: 123456}这样的JSON数组中获取id。但是我不能从这种方式进去。 下面是一些JSON数据： var categoryArray = [
{id: '1', name: 'Category_1'},
{id: '2', name: 'Category_2'},
{id: '3', name: 'Category_3'},
{id: '4', name: 'Category_4'}
浏览 9提问于2020-06-19得票数 0
回答已采纳
1回答
我应用if else语句来显示基于的不同东西--如果已经准备好了，并且用户已经登录到中，但是即使它被正确地连接到存储，它仍然是未定义的，而且我被困在加载块中。
Dashboard.js：
...
componentDidMount() {
console.log("our props", this.props.firebase.auth.uid)
}
render() {
const { fireStore, firebase } = this.props;
if(f
浏览 0提问于2019-01-30得票数 0
我得到了数据json：
componentDidMount() {
const {axios} = this.props
const {invoice} = this.state
axios({
method: 'get',
url: `/invoice`,
}).then((result) => {
this.setState({invoice: resu
浏览 0提问于2018-11-04得票数 0
我有个错误：
TypeError:无法读取未定义的属性“0”
它说const id = data[0];是导致错误的原因。
我的数据存储在location.state中，因为这是从上一页的一行中提取的。数据以数组的形式存储。
这是JSON对象中的数据：
[
"DgduuIHAf1wc2txlaK86",
"Item1",
];
以下是守则：
const Edit = () => {
const location = useLocation();
const data = location.state;
const id = da
浏览 3提问于2021-05-21得票数 0
我试图在组件之间传递一些状态，但是值始终是未定义的。
我有一个叫Home的组件。当用户输入要登录的电子邮件和密码时，我希望将这些状态传递给我的其他组件，也就是说，我有用户登录信息。但是，console.log语句显示它们是未定义的。
渲染法中的Home.js
return (
<div>
<HomePage signInEmail={this.state.signInEmail} signInPassword={this.state.signInPassword}/>
<p>Account</p>
<button
浏览 2提问于2018-11-23得票数 0
回答已采纳
尝试显示从response.but接口接收的数据的长度，它说不能读取未定义的属性
async componentDidMount() {
Users.getAppAuthUser(1,true).then((res)=>{
this.setState({data:res});
this.setState({loading:false});
})
console.log(this.state.data);
}
render() {
return (
<div
浏览 2提问于2019-09-19得票数 1
我正在从事ReactJS项目，我的要求很简单。如果项目中出现错误，请在屏幕上显示错误消息，而不是白屏幕上显示错误。
例如：
for(let i=0; i<array.length; i++){
//something here
}
因此，在本例中，假设array.length是未定义的或null，则在控制台中显示它的错误，代码以白色屏幕中断。我想要的只是在运行时处理这种呈现错误问题，这样用户就可以理解这里有一个错误等等。
谢谢。
浏览 12提问于2022-08-03得票数 0
2回答
我在反应中使用形式。我把用户数据存储在本地存储中，现在我想上传文件，我想用userID存储文件密钥，它已经存储在本地存储中了。使用localstorage.getItem('user')，我能够显示用户值，但没有在键中使用，当我在控制台中显示用户值时，它会给我未定义的消息。您能帮我怎样用userid设置密钥吗？
码
handleUpload = e => {
const reader = new FileReader();
const storeUser = JSON.parse(localStorage.getItem('user'
浏览 1提问于2018-12-01得票数 0
我试图在表单提交后更新我的状态，而不刷新页面。我的ReactJ代码的一部分：
export default class DashboardRA extends Component {
constructor(props)
{
super(props);
this.state = {
json:JSON.parse(props.data),//data received from a laravel controller used to implement the page.
pdf: '',
...
...
浏览 2提问于2020-05-30得票数 0
回答已采纳
我正在开发一个应用程序，它使用axios获取数据，然后将其存储在redux存储中。如果数据可以从api端点获得，那么一切都可以正常工作，但是当我没有数据时，问题就会出现，它会给我错误的解释。
TypeError: props.teamProduct._embedded未定义
这就是我的数据对成功调用的看法。
当我得到未定义的结果时，
这是我的代码
我就是这样从商店里得到team列表的
const mapStateToProps = (state) => {
return {
team: state.productDetails.team.
浏览 2提问于2020-04-07得票数 0
回答已采纳
2回答
我是ReactJS新手，我现在尝试做一个交互式评论部分(摘自frontendmentor.io)，但是App并没有显示它应该显示的内容
这是我的App组件：
function App() {
const [data, setData] = useState([]);
useEffect(() => {
const getComm = async () => {
await fetchData();
};
getComm();
}, []);
console.log(data)
浏览 6提问于2022-01-03得票数 1
回答已采纳
当我点击Info时，我试图显示每个字符的数据。我知道这是因为在onButtonClickHandler函数中它看不到状态。我也尝试过this.state.person，但是它给了我一个错误，说“无法读取状态”。如果我只尝试state.person，它将给我“未定义”。
做这件事的最好方法是什么？谢谢
API：
import React from "react";
export default class FetchActors extends React.Component {
state = {
loading: true,
person: null
浏览 0提问于2020-11-01得票数 1
回答已采纳
我想要做的是从ListBox中选择一个项目，并在同一个WebPage中显示它。ListBox呈现正确，但当我尝试输出选定的值时，它显示目标未定义。在代码中引用注释。
我尝试使用event.target.value检索选定的值，到目前为止，它一直对我有效，但它显示event.target是未定义的，并且该值不可访问。
注意:我尝试使用Grommet来设置样式，"List"，"Box"，"ListItem“都是grommet组件。
任何帮助都将受到高度的感谢。
import React, {Component} from "react";
i
浏览 2提问于2018-02-22得票数 1
回答已采纳
我在推送数据时遇到了一个错误：
Uncaught :无法读取未定义的属性“forEach”
this.props.clist.forEach(function(company) {
companies.push( <Company company={company} onCompanyDelete={that.handleCompanyRemove} /> );
});
完整代码： (第49行)
来自的示例
浏览 0提问于2018-05-11得票数 0
1回答
大家好，我有跟踪的人
我想像下面这样显示我的DefaultValue嵌套对象
"DefaultValue"，"DefaultValue“
我有来自后端的以下数据：
const data = [
{
id: 243,
Name: "test",
type: "checkbox",
DefaultValue: {
DefaultValue: {
DefaultValue: {
DefaultValue: {
浏览 6提问于2022-09-07得票数 0
回答已采纳
我有以下问题：
我从数据库中获取数据(真值或假值)，并希望将其保存到useState中。我正在使用异步/等待获取。因此，保存到我的状态的值是未定义的。
这是我的代码：
const [myState, setMyState] = useState();
useEffect(() => {
myFunction()
async function myFunction () {
const req = await fetch("http://localhost:3001/api/getdata", {
headers: {
浏览 5提问于2021-12-17得票数 0
回答已采纳
我正在使用ReactJS、ExpressJS、NodeJS、PostgreSQL和Redux
我试图通过axios调用从后端检索SQL表的一行。调用返回嵌套在数组[{..}]中的对象中的请求数据。当我试图对数据进行分解或通过括号符号访问数据时，就会出现问题。
如果使用此表示法this.props.returnedData[0]来访问返回数组中的唯一对象，则会得到returnedData不存在或未定义的错误。
请记住，我可以看到它实际上已经通过console.log返回了数组中的数据。
我相信这是因为componentDidMount在React已经尝试呈现returnedData之后返回数据。
浏览 0提问于2018-09-24得票数 0
回答已采纳
因此，我有一个组件，它显示从外部API获取并保存到localStorage中的一些数据。我已经放置了一个fetchData()函数来完成这个任务，并且我在componentWillMount()中调用了这个函数。看起来是这样的：
componentWillMount() {
this.fetchData();
}
...
fetchData() {
if(localStorage.myData === undefined) {
fetch(apiUrl,{
method: 'GET',
header
浏览 8提问于2016-10-21得票数 3
回答已采纳
新程序员在这里学习ReactJS。我有一些代码使用axios来发出HTTP请求，从本地文件中获取XMLData。然后，在响应中，我使用XML将XML数据转换为JSON对象。然后，我将这个jsonObj保存到使用setState()的状态。
我有一个函数renderTableRows()，它应该返回JSX在浏览器上显示我的JSON数据。我对状态进行了非结构化，并尝试从renderTableRows()控制台日志，但是当我试图访问users.result.body时，
"TypeError:无法读取未定义的属性‘主体’“。
当我从then()在componentDidMount()中做
浏览 0提问于2021-05-02得票数 4
我是一个新的react，这个羽毛笔插件真的把我搞糊涂了。我使用react-quilljs来显示一个可编辑的富文本字段，该字段应该预先填充了使用fetch from my API检索到的值。看起来很简单，对吧？但是我在fetch回调中得到了错误‘羽毛未定义’。 import React, { useState, useEffect } from "react";
import { useQuill } from "react-quilljs";
import "quill/dist/quill.snow.css";
import "qu
浏览 28提问于2020-12-30得票数 2
我使用的是react路由器v3.2.0，这是我的app.js，错误显示在在线路由器上: PropTypes.object在chrome中，在边缘它显示错误为TypeError:无法获得未定义或空引用的属性'object‘在类AppExtendedReact.Component中，顺便说一句，我是新手
import React, { PropTypes } from 'react';
import { Router } from 'react-router';
import './App.css';
class App extends R
浏览 2提问于2018-01-23得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
