Question

有没有更好的方法来执行以下操作。考虑这段代码：

this.state = {
      dates: [
        {date: '1st', matches:[]},
        {date: '2nd', matches:[]},
        {date: '3rd', matches:[]},
        {date: '4th', matches:[]},
        {date: '5th', matches:[]}
      ]
    }

  addToDates = () => {
    let dates = this.state.dates;
    const matches = this.props.matches;
    matches.forEach(function(match){
      dates.forEach(function(date){
        if (match.date == date.date){
          this.setState({dates: this.state.dates.concat(match)})
        }
      })
    })
  }

我想要做的是迭代2个数组，如果我找到一个与日期具有相同日期的匹配，那么我想将它添加到匹配数组。

2个问题，首先是有更好的方法比较2个数组而不是迭代两个数组？其次，我无法读取未定义的setState，即使我有：

this.addToDates = this.addToDates.bind(this) bound it in my constructor. i thought arrow functions solved that scoping too?

Answer 1

您需要在addToDate方法中使用箭头功能。实际上，您不必在构造函数中绑定addToDates，因为您使用箭头函数作为类属性。

如果您不使用this循环的箭头功能，this.setState使用forEach时的值会有所不同。

addToDates = () => {
  let dates = this.state.dates;
  const matches = this.props.matches;
  matches.forEach(match =>{
    dates.forEach(date =>{
      if (match.date == date.date){
        this.setState({dates: this.state.dates.concat(match)})
      }
    });
 });

根据MDN

在箭头函数之前，每个新函数都定义了自己的这个值（构造函数中的新对象，在严格模式下未定义）函数调用，如果函数被调用为基础对象＆＃34;对象方法＆＃34;等）。事实证明这很烦人面向对象的编程风格。一个箭头函数不会创建它自己的这个值使用封闭执行上下文。

无法读取未定义的setstate

1 个答案: