排序中的 React JS 函数返回 Null答案

【问题标题】：React JS function within Sort returning Null排序中的 React JS 函数返回 Null
【发布时间】：2021-07-28 16:34:02
【问题描述】：

感觉就像 JS 让我开始使用通常可以工作的东西，但这次 JS 和 React 的微妙技巧却让我绊倒了。

所以，当前代码：

 GetSortedMarkets() {
   events = events.sort(function (a, b) {
      const aMarket = a.Markets.find(m => { 
            const mType = m.markettype;
            const mName = m.name;

            if (mType !== null && mType.toUpperCase().includes("MONEY")) return true;
            else if (mName == "Money" || (mName == "MONEY")) return true;
            else return false;
      });

      const bMarket = b.Markets.find(m => { 
            const mType = m.markettype;
            const mName = m.name;
            
            if (mType !== null && mType.toUpperCase().includes("MONEY")) return true;
            else if (mName == "Money" || (mName == "MONEY")) return true; 
            else return false; 
      });

      return aMarket.marketPosition - bMarket.marketPosition;
   });
}

这很好用。但是，用于获取 a/b 市场的 find 函数在这里使用了两次，在其他地方使用了一次。为了减少代码重复，我将功能移到一个单独的方法中。

新代码：

GetMoneyMarket(markets) {
   return markets.find(m => {
      const mType = m.markettype;
      const mName = m.name;
        
      if (mType !== null && mType.toUpperCase().includes("MONEY")) return true;
      else if (mName == "Money" || (mName == "MONEY")) return true; 
      else return false;
   });
}

GetSortedMarkets() { 
   events = events.sort(function (a, b) {
      const aMarket = this.GetMoneyMarket(a.Markets);
      const bMarket = this.GetMoneyMarket(b.Markets);
      return aMarket.marketPosition - bMarket.marketPosition;
   });
}

我现在遇到的问题是它似乎在函数 GetMoneyMarket 完成执行并返回值之前尝试继续。因此，当它尝试加载尚未加载的对象的属性时，返回会引发异常。

从目前的研究来看，一个建议似乎是 React 在其自己的控制台中执行的顺序与查看代码的预期顺序不同。我希望它能够同步逐行执行。

这些方法现在也可能尝试异步执行，我试图强制它们等待完成，但没有成功。虽然有可能我做错了。

不理想的解决方案是保留重复的代码。它的代码行数不多，并且在不涉及外部功能时可以工作。但是，这似乎应该起作用，最好现在解决这个问题，所以我准备好了以后不能重复的事情。

感谢阅读。

更新 - 错误消息：TypeError: Cannot read property 'GetMoneyMarket' of undefined

【问题讨论】：

你能发布你得到的确切错误吗？在示例中，this 关键字可能不是您所期望的。如果您可以创建一个 jsfiddle 示例或将包含块添加到您的示例中，那么弄清楚这一点会更容易一些。这里的执行顺序应该是同步的。
@nipuna777 "TypeError: 无法读取未定义的属性 'GetMoneyMarket'。" 这是我怀疑并忘记提及的另一件事。如果进入排序会改变“this”的引用。
你能不能把排序函数变成箭头函数，看看有没有帮助？ (a, b) => {`
这个GetSortedMarkets 是在什么上下文中调用的？它来自事件处理程序吗？
@nipuna777 看来我要研究箭头和指定函数之间的细微差别了！这似乎奏效了。 DaveNewton 所有被调用的方法都在使用 this.MethodName 调用的 React 类中。看来我要研究的 function(a,b)/ (a,b) => 之间的差异应该归咎于我的问题。感谢两位的贡献。

标签： javascript reactjs function sorting null

【解决方案1】：

感谢https://stackoverflow.com/users/3156644/nipuna777的建议，似乎找到了解决办法。

问题似乎是由于常规函数和箭头函数的差异。将我的排序函数更改为包含箭头而不是常规似乎允许其中的方法找到并运行它们应该执行的逻辑。

我现在将参考 https://dmitripavlutin.com/differences-between-arrow-and-regular-functions/ 以了解我可以了解导致此问题的差异。该链接适用于遇到此问题后想要执行相同操作的其他人。

【讨论】：