我该如何避免在 React 中出现这种类型的错误？
2018-03-21
257
大家好，我正在开发 reactjs 项目，我遇到了一个问题，如果你想帮助我，请提前感谢
我将我的数据
<StoryMap data={this.state.data} />
传递给我的函数，这样我就可以将活动和任务推送到行为和任务“json 格式”中
function StoryMap(props) {
var acts = [];
var taskss = [];
for (var i = 0; i < props.data.activities.length; i++) {
acts.push(props.data.activities[i]);
console.log(acts)
for (var j = 0; j < props.data.activities[i].tasks.length; j++) {
taskss.push(props.data.activities[i].tasks[j]);
console.log(taskss)
}
}
console.log(acts);
return (
<table border="1">
<tr></tr>
</table>
);
}
在控制台输出中，console.log 工作正常，但出现错误 × TypeError：无法读取未定义的属性“length”
3个回答
您需要在使用它之前检查
props.data.activities
是否存在，因为
this.state.data
在初始渲染期间在您的父组件中可能最初为空，并且您可能稍后才会填充它
function StoryMap(props) {
var acts = [];
var taskss = [];
if(props.data.activities) {
for (var i = 0; i < props.data.activities.length; i++) {
acts.push(props.data.activities[i]);
console.log(acts)
for (var j = 0; j < props.data.activities[i].tasks.length; j++) {
taskss.push(props.data.activities[i].tasks[j]);
console.log(taskss)
}
}
}
console.log(acts);
return (
<table border="1">
<tr></tr>
</table>
);
}
Shubham Khatri
2018-03-21
尝试此代码：它有效
import React, { Component } from "react";
function StoryMap(props) {
var acts = [];
var taskss = [];
for (var i = 0; i < props.data.activities.length; i++) {
acts.push(props.data.activities[i]);
console.log("acts", acts);
console.log("prop: ", props.data.activities[i].tasks);
if (props.data.activities[i].tasks) {
console.log("length :", props.data.activities[i].tasks.length);
for (var j = 0; j < props.data.activities[i].tasks.length; j++) {
taskss.push(props.data.activities[i].tasks[j]);
console.log(" tasks ", taskss);
}
}
}
console.log(acts);
return (
<table border="1">
<tr />
</table>
);
}
class App extends Component {
constructor(props) {
super(props);
this.state = {
data: {
activities: [
{
id: "A1",
label: "Activite 1",
tasks: [
{
id: "A1.T1",
label: "Activite 1 task 1"
},
{
id: "A1.T2",
label: "Activite 1 task 1"
},
{
id: "A1.T3",
label: "Activite 1 task 1"
}
]
},
{
id: "A2",
label: "Activite 2",
tasks: [
{
id: "A2.T1",
label: "Activite 1 task 1"
},
{
id: "A2.T2",
label: "Activite 1 task 1"
},
{
id: "A2.T3",
label: "Activite 1 task 1"
}
]
},
{
id: "A3",
label: "Activite 3"
},
{
id: "A4",
label: "Activite 4"
}
],
releases: [
{
id: "R1",
storiesByTasks: {
"A1.T1": [
{
id: "A1.T1.S1"
},
{
id: "A1.T1.S2"
}
],
"A1.T2": [
{
id: "A1.T2.S1"
},
{
id: "A1.T2.S2"
},
{
id: "A1.T2.S3"
}
]
}
},
{
id: "R2",
storiesByTasks: {
"A1.T2": [
{
id: "A1.T2.S4"
},
{
id: "A1.T2.S5"
}
],
"A2.T1": [
{
id: "A2.T1.S8"
}
]
}
}
]
}
};
}
render() {
return (
<div>
<StoryMap data={this.state.data} />
<div className="App" />
</div>
);
}
}
export default App;
Muhammad Hashir
2018-03-21
this is the code and it contains the data
import React, {Component} from 'react';
import './App.css';
import Ranger from './header.js';
function StoryMap(props) {
var acts = [];
var taskss = [];
for (var i = 0; i < props.data.activities.length; i++) {
acts.push(props.data.activities[i]);
console.log(acts)
for (var j = 0; j < props.data.activities[i].tasks.length; j++) {
taskss.push(props.data.activities[i].tasks[j]);
console.log(taskss)
}
}
console.log(acts);
return (
<table border="1">
<tr></tr>
</table>
);
}
class App extends Component {
constructor(props) {
super(props);
this.state = {
data: {
activities: [
{
id: 'A1',
label: 'Activite 1',
tasks: [
{
id: 'A1.T1',
label: 'Activite 1 task 1'
}, {
id: 'A1.T2',
label: 'Activite 1 task 1'
}, {
id: 'A1.T3',
label: 'Activite 1 task 1'
}
]
}, {
id: 'A2',
label: 'Activite 2',
tasks: [
{
id: 'A2.T1',
label: 'Activite 1 task 1'
}, {
id: 'A2.T2',
label: 'Activite 1 task 1'
}, {
id: 'A2.T3',
label: 'Activite 1 task 1'
}
]
}, {
id: 'A3',
label: 'Activite 3'
}, {
id: 'A4',
label: 'Activite 4'
}
],
releases: [
{
id: 'R1',
storiesByTasks: {
'A1.T1': [
{
id: 'A1.T1.S1'
}, {
id: 'A1.T1.S2'
}
],
'A1.T2': [
{
id: 'A1.T2.S1'
}, {
id: 'A1.T2.S2'
}, {
id: 'A1.T2.S3'
}
]
}
}, {
id: 'R2',
storiesByTasks: {
'A1.T2': [
{
id: 'A1.T2.S4'
}, {
id: 'A1.T2.S5'
}
],
'A2.T1': [
{
id: 'A2.T1.S8'
}
]
}
}
]
}
};
}
render() {
return (
<div>
< StoryMap data={this.state.data}/>
<div className="App"></div>
</div>
);
}
}
export default App;
JsNinja
2018-03-21