Question

我有以下设置：

导航到StudentsBoard：

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

如何设置路线：

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

在StudentsBoard页面上：

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交换，后者代表字符串，例如'monday'。

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。

Answer 2

。和['']是等价的。但是我不明白为什么你在这里使用'day'和'color'？您的数据结构中没有此类字段。你可以在console.log中打印它们，以便在从对象解析之前查看第一天的日期和颜色吗？

ReactJS / React-Router：如何根据url路径参数过滤嵌套数组和对象？

2 个答案: