Question

我正在A类的ComponentDidMount中访问JSON文件，我需要在类外部访问该结果，并需要在B类中使用它

0: kd> ub rip L13
nt!PpmIdleExecuteTransition+0xbe3:
fffff801`1be4e0b3 4032ff          xor     dil,dil
fffff801`1be4e0b6 0fb686302d0000  movzx   eax,byte ptr [rsi+2D30h]
fffff801`1be4e0bd a801            test    al,1
fffff801`1be4e0bf 740f            je      nt!PpmIdleExecuteTransition+0xc00 (fffff801`1be4e0d0)
fffff801`1be4e0c1 a808            test    al,8
fffff801`1be4e0c3 750b            jne     nt!PpmIdleExecuteTransition+0xc00 (fffff801`1be4e0d0)
fffff801`1be4e0c5 33c0            xor     eax,eax
fffff801`1be4e0c7 b948000000      mov     ecx,48h
fffff801`1be4e0cc 33d2            xor     edx,edx
fffff801`1be4e0ce 0f30            wrmsr
fffff801`1be4e0d0 488b8518030000  mov     rax,qword ptr [rbp+318h]
fffff801`1be4e0d7 458bc4          mov     r8d,r12d
fffff801`1be4e0da 448b8d0c030000  mov     r9d,dword ptr [rbp+30Ch]
fffff801`1be4e0e1 8b54244c        mov     edx,dword ptr [rsp+4Ch]
fffff801`1be4e0e5 488b8c2480000000 mov     rcx,qword ptr [rsp+80h]
fffff801`1be4e0ed 4889442420      mov     qword ptr [rsp+20h],rax
fffff801`1be4e0f2 ff9598010000    call    qword ptr [rbp+198h]
fffff801`1be4e0f8 448be0          mov     r12d,eax
fffff801`1be4e0fb 89442444        mov     dword ptr [rsp+44h],eax
0: kd> u rip
nt!PpmIdleExecuteTransition+0xc2f:
fffff801`1be4e0ff 0fb686302d0000  movzx   eax,byte ptr [rsi+2D30h]
fffff801`1be4e106 a801            test    al,1
fffff801`1be4e108 7418            je      nt!PpmIdleExecuteTransition+0xc52 (fffff801`1be4e122)
fffff801`1be4e10a a808            test    al,8
fffff801`1be4e10c 7514            jne     nt!PpmIdleExecuteTransition+0xc52 (fffff801`1be4e122)
fffff801`1be4e10e 41b801000000    mov     r8d,1
fffff801`1be4e114 33d2            xor     edx,edx
fffff801`1be4e116 418bc0          mov     eax,r8d

在这里，let test; console.log(test); class CustomerPage extends React.Component { componentDidMount(): void { $.getJSON("/api/LocaleStrings") .done(results => { let JsonString = JSON.parse(results); test = new LocalizedStrings(JsonString); }) .fail(console.log.bind(console)); } }产生console.log(test)。

Answer 1

我建议多读一些有关React组件如何共享数据的内容。需要数据的组件可以定义一个输入，您可以在其中传递测试变量。或使用redux存储（对于您的应用程序可能太复杂了）。如果您真的要继续此路线。您始终可以使用window对象来设置全局变量：window.test = 'bla';。使用console.log(window.test);可以在应用程序中的任何位置使用它。

您必须将代码更新为： window.test = new LocalizedStrings(JsonString);。

验证它是否已设置需要一定的时间间隔：

setInterval(function() {
   console.log(window.test);
 }, 100);

Answer 2

在我看来，您的console.log(test)在AJAX调用返回之前就已执行，这时它将被未初始化（undefined）。将console.log放在done函数中。

您可以将AJAX结果存储在组件的状态：

class CustomerPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = { test: null };
  }
  componentDidMount(): void {
    $.getJSON("/api/LocaleStrings")
      .done(results => {
        let JsonString = JSON.parse(results);
        this.setState({
          test: new LocalizedStrings(JsonString);
        });           
      })
     .fail(console.log.bind(console));
  }
}

Answer 3

您需要有一个“事件”，以通知有兴趣的人test可用：

interface CustomerPageProps {
   onLocaleStringsLoaded?: (test:object) => void
}

class CustomerPage extends React.Component<CustomerPageProps> {
  static defaultProps {
       onLocaleStringsLoaded: () => {} //nothing by default
  }
  componentDidMount(): void {
    $.getJSON("/api/LocaleStrings")
      .done(results => {
        let JsonString = JSON.parse(results);
        const test = new LocalizedStrings(JsonString);
        this.props.onLocaleStringsLoaded(test);
      }).fail(console.log.bind(console));
  }    
}

然后在您的代码中的某些时候您可以拥有：

<CustomerPage onLocaleStringsLoaded={window.console.log.bind(window.console)} />

，结果可用后将打印到控制台。

将值关联到外部类的变量

3 个答案: