javascript - ReactJS/React-路由器 : How to filter nested array and objects based on url path parameters?

Question

我进行了以下设置:

导航到学生板:

  <Link to={`/StudentsBoard/Kev/monday/blue`}></Link>

如何设置路线:

  <Route
    component={StudentsBoard}
    path='/StudentsBoard/:name/:day/:color'
  />

在学生板页面上:

const mapStateToProps = (state, ownProps) => {
  let student = state.students.filter(student => student.name == ownProps.params.name)

  let day = ownProps.params.day
  let color = ownProps.params.color

  return {
    carFiles: student[0].day.color //Getting an error here saying day and color are - Uncaught TypeError: Cannot read property 'day'/'color' of undefined
  }
}

但是对于 let day 和 let color 我收到错误:Uncaught TypeError: Cannot read property 'day'/'color' of undefined

如何将传入的参数、day 和 color 作为对 student[0] 中属性的引用？或者是否有更好的方法根据通过 ownProps.params 传入的参数来过滤对象？希望最终了解颜色对象。

谢谢您，一定会投票并接受答案

编辑

数据结构:

students: [
  {
    name: Kev
    monday: {
      blue: {
        room: 5
      },
      pink: {
        root: 6
      }
    },
    tuesday: {
      green: {
        room: 7
      },
      purple: {
        root: 8
      }
    },
  },
  {
    name: Jerome
    monday: {
      black: {
        room: 5
      },
      orange: {
        root: 6
      }
    },
    tuesday: {
      yellow: {
        room: 7
      },
      purple: {
        root: 8
      }
    },
  },
]

Answer 1

正如评论中所述，您需要使用

students[0][day][color]

您所做的是尝试访问一个必须如下所示的对象:

var students = [{
    day: {
        color: {}
    }
}]

让我用一个例子来解释:

student.monday

与

相同

student['monday']

当然，.monday版本更方便，但是当使用['monday']时，它使您能够交换'monday' 与变量 day，它代表一个字符串，例如'星期一'。

var propertyName = 'monday';
student[propertyName];

您通常应尽可能使用 .monday 变体，并且仅在必要时使用方括号(如您的情况)。

如果数据结构上的属性不存在，您还应该添加某种错误处理。由于您正在处理来自 URL 的字符串(用户可以更改该字符串)，因此您的代码可能会损坏。

// check if day and color properties are available
// for that student
if(!students[0][day] || !students[0][day][color]) {
    // either day or color does not exist on student
    return { carFiles: null };
}
// All good, proceed as normal

请注意，您的组件需要处理这种情况，其中 this.props.carFiles 为 null。