如何避免在反应中出现此类错误？

Question

Hello everybody i'm working on reactjs project here i have an issue if you want to help me thanks for advance i passed my data <StoryMap data={this.state.data} /> to my function so i can push activities and tasks into acts and tasks '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>
  );
}

in console output the console.log works fine but there is an error × TypeError: Cannot read property 'length' of undefined

error

Answer 1

You need to check if props.data.activities is present before using it since this.state.data may initially be empty in your parent component during initial render and you could be populating it only later

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

Answer 2

Try This code: it works

 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;

Answer 3

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;

Answer 4

try this

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;