时间戳

首页 > 解决方案 > 具有非 JSX 类的 React 功能组件具有返回未定义的内部数组

javascript - 具有非 JSX 类的 React 功能组件具有返回未定义的内部数组

问题描述

我正在为我正在创建的库编写一些类和函数，但我碰壁了。

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

我已经创建了一个代码框，其中包含我迄今为止尝试过的一些测试：

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

编辑 blazing-dust-noh2m

代码框包含以下代码：

//App.js
import { useRef, useState } from "react";
import testClass, { TestClass } from "./TestClass";

export default function App() {
  //Testing normal initialization
  const test = new TestClass();
  console.log("test init");
  //test.printList();

  //Testing useRef
  const testRef = useRef(new TestClass());
  console.log("testRef");
  //testRef.current.printList();

  //Testing useState
  const [testState, setTestState] = useState(new TestClass());
  console.log("testState");
  //testState.printList();

  //Testing static instance
  //console.log("static instance");
  //testClass.printList();

  //The problem is that the list logs undefined instead of [] (initialized)
  return (
    <div className="App">
      <button onClick={test.printList} style={{ margin: 10 }}>
        ClickMe (Normal Initialization)
      </button>

      <button onClick={testRef.current.printList} style={{ margin: 10 }}>
        ClickMe (Ref Initialization)
      </button>

      <button onClick={testState?.printList} style={{ margin: 10 }}>
        ClickMe (State Initilization)
      </button>

      <button onClick={testClass.printList} style={{ margin: 10 }}>
        ClickMe (static instance Initilization)
      </button>
    </div>
  );
}

//TestClass.js
export class TestClass {
  list = [];

  constructor() {
    //this says it's initialized
    console.log(this.list);
  }

  printList() {
    //this is undefined
    console.log(this.list);
  }

  static get instance() {
    return testClass;
  }
}

const testClass = new TestClass();

export default testClass;

*更新

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

使用新按钮，我可以按预期返回定义的列表。

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

export class TestClass {
  list = [];

  constructor() {
    //this says it's initialized
    //console.log(this.list);
  }

  printList() {
    console.log("function", this.list);
  }

  printList2 = () => {
    console.log("const", this.list);
  };

  static get instance() {
    return testClass;
  }
}

const testClass = new TestClass();

export default testClass;

{/* log -> "function" undefined (function still being called?) */}
<button onClick={test.printList} style={{ margin: 10 }}>
  ClickMe (Normal Initialization)
</button>

{/* log -> "const" [] (as expected)*/}
<button onClick={test.printList2} style={{ margin: 10 }}>
  ClickMe (Normal Initialization)
</button>

标签： javascriptreactjs

解决方案

问题是你如何分配按钮printList的onClick道具。

<button onClick={test.printList} />

这会将this上下文绑定更改为window，并且window.list未定义，因此存在问题。

正确的做法：

// 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)
  }
}

推荐阅读