如何避免这种类型的错误？

时间：2018-03-21 09:00:15

标签： javascript reactjs

大家好，我在这里工作reactjs项目我有一个问题，如果你想帮助我感谢提前 我将我的数据<StoryMap data={this.state.data} />传递给我的函数，这样我就可以将活动和任务推送到行为和任务'json format'

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”

error

4 个答案:

答案 0 :(得分：2)

在使用之前，您需要检查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>
  );
}

答案 1 :(得分：1)

尝试此代码：它有效

 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;

答案 2 :(得分：0)

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;

答案 3 :(得分：0)

试试这个

App.js 

import React, { Component } from 'react';
import StoryMap from './StoryMap';

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></div>
        </div>
      );
    }
  }

  export default App;

StoryMap.js 

import React, {Component} from 'react';
import PropTypes from 'prop-types';

class StoryMap extends Component{

    render(){
        const {data} = this.props;
        //console.log("data",data)
        var acts = [];
        var taskss = [];
        //console.log(data);

            for (var i = 0; i < data.activities.length; i++) {
                acts.push(data.activities[i]);
                console.log(acts)

              if(data.activities[i].tasks){
                for (var j = 0; j < data.activities[i].tasks.length; j++) {
                    taskss.push(data.activities[i].tasks[j]);
                    console.log(taskss)
                  }   
              }

            }     

          return (
            <table border="1">
              <tr></tr>
            </table>
          );
    }
}

export default StoryMap;
相关问题
最新问题