Javascript 非JSX类的React功能组件具有返回未定义的内部数组 请参阅下面的更新

我正在为我正在创建的库编写一些类和函数，我遇到了麻烦

我找不到任何关于为什么非JSX类有一个初始化数组的信息，但是，当在react函数中使用它时，它是未定义的

我已经创建了一个codesandbox，其中包含了一些到目前为止我尝试过的测试：

• 正常初始化
• useRef初始化
• useState初始化
• 静态实例初始化

所有这些初始化都记录在类函数调用中未定义数组

codesandbox包含以下代码：

//App.js
从“react”导入{useRef，useState}；
从“/testClass”导入testClass，{testClass}；
导出默认函数App（）{
//测试正常初始化
const test=新的TestClass（）；
console.log（“testinit”）；
//test.printList（）；
//测试useRef
const testRef=useRef（新TestClass（））；
console.log（“testRef”）；
//testRef.current.printList（）；
//测试使用状态
const[testState，setTestState]=useState（newtestclass（））；
log（“testState”）；
//testState.printList（）；
//测试静态实例
//log（“静态实例”）；
//testClass.printList（）；
//问题是列表日志未定义，而不是[]（已初始化）
返回(
单击我（正常初始化）
单击我（参考初始化）
单击我（状态初始化）
ClickMe（静态实例初始化）
);
}

//TestClass.js
导出类TestClass{
列表=[]；
构造函数（）{
//这表示它已初始化
console.log（this.list）；
}
打印列表（）{
//这是未定义的
console.log（this.list）；
}
静态get实例（）{
返回testClass；
}
}
const testClass=新的testClass（）；
导出默认测试类；

*更新

我已经更新了代码沙盒。伊恩让我注意到按钮内的功能调用，我已经更新了该区域

有了新的按钮，我可以像预期的那样重新定义列表

但是，我的问题仍然是为什么数组未定义/调用时，例如

导出类TestClass{
列表=[]；
构造函数（）{
//这表示它已初始化
//console.log（this.list）；
}
打印列表（）{
console.log（“函数”，this.list）；
}
printList2=（）=>{
console.log（“const”，this.list）；
};
静态get实例（）{
返回testClass；
}
}
const testClass=新的testClass（）；
导出默认测试类；

{/*log->“函数”未定义（仍在调用函数？*/}
单击我（正常初始化）
{/*log->“const”[]（如预期）*/}
单击我（正常初始化）

当您在构造函数中

console.log

时，实际上是通过

此

引用列表作为窗口对象的属性，因为您在类构造函数之外定义了

列表

。您应该改为在构造函数中执行

const list=[]

。只有这样，您的类的

此

才能访问

列表

问题在于如何将

打印列表

分配给

单击按钮的属性

<button onClick={test.printList} />

不，这是一个不正确的解释。虽然这是不正确的，但您帮助我继续进行故障排除。我会更新我的问题。要在构造函数中定义，我将使用
this.list=[]
。你的回答让我意识到，在点击按钮时，我打错了电话。我将在问题的更新部分进行描述。您无需更改声明
list
属性的方式，根据ES规范，它是完全有效的语法。这个答案完全错误。很酷，是的，这回答了我的问题。我意识到刚才我的电话不正确，但我仍然不明白为什么它没有定义。这使得，因为它正在更改绑定到窗口的上下文。谢谢你，哈卡普。你知道我在哪里可以找到更多关于绑定工作原理的信息吗？试着搜索“understand JS this keyword”，有很多关于这个主题的帖子。对我来说，这是我一年来学到的一个概念，我想不起任何特别有用的资源，所以我不能给出建议，对不起。
// 1. Inline arrow function
<button onClick={() => test.printList()} />
// 2. Bind `this` context explicitly 
<button onClick={test.printList.bind(test)} />
// 3. Use arrow function at declaring the method in class
class TestClass {
  printList = () => {
    console.log(this.list)
  }
}