如何在React中访问另一个文件(和函数)的状态？

Question

我在寻找解决我的问题的方法。我正在使用一个名为unstated (https://github.com/GitbookIO/unstated)的库。它为reactjs应用创造了一个全球状态。问题是:我不能在我的函数Y中使用在函数X上创建的状态。在这个例子中，我在App.js中创建了我的状态，并希望在我的DivCheckBox.js中访问它。

App.js：

    import './App.css';
import DivCheckBox from './components/DivCheckBox/DivCheckBox';
import { Container, useUnstated } from '@gitbook/unstated';

class DadosUnstated extends Container<{
  nodesPadrao: Object,
  edgesPadrao: Object,
  }> {
  state = {
    nodesPadrao: [
      {
        status: 0,
        id:1,
        label: 'MAT001',
        title: 'CALCULO DIFERENCIAL E INTEGRAL I',
        details: "Integrais- impróprias: seqüências séries numéricas. Funções de R em R. Derivadas. Integrais. Aplicações. \"Regras de L'Hospital\".",
        level: 1,
        weight: 90,
        groupId: 1,
        subGroupId: 1,
        slots: [1, 2],
      },
      {
        status: 0, 
        id:50,
        label: 'EEE019',
        title: 'TRABALHO DE CONCLUSAO DE CURSO II',
        details: 'Finalização do projeto elaborado, no projeto final de curso I e apresentação de monografia. Defesa do trabalho perante banca examinadora.',
        level: 11,
        weight: 90,
        groupId: 5,
        subGroupId: 4,
        slots: [1, 2],
      },
      {
        status: 0, 
        id:51,
        label: 'EEE020',
        title: 'ESTAGIO SUPERVISIONADO EM ENGENHARIA DE SISTEMAS',
        details: 'Atividades de treinamento, supervisionadas por um docente do curso, na área de atuação profissional do engenheiro de sistemas.',
        level: 12,
        weight: 165,
        groupId: 5,
        subGroupId: 4,
        slots: [1, 2],
      },
    ],

    edgesPadrao:[
      {
        id: 1,
        from: 1,
        to: 7,
        label: 'MAT001 -> MAT039',
      },
      {
        id: 29,
        from: 32,
        to: 41,
        label: 'ELEXXE -> ELEXXF',
      },
      {
        id: 30,
        from: 44,
        to: 42,
        label: 'ELE090 -> ELEXXG',
      },
      {
        id: 31,
        from: 40,
        to: 41,
        label: 'ELEXXF -> ELE088',
      },
      {
        id: 32,
        from: 30,
        to: 42,
        label: 'ELT080 -> ELEXXG',
      },
      {
        id: 33,
        from: 35,
        to: 40,
        label: 'ELE077 -> ELE088',
      },
      {
        id: 55,
        from: 11,
        to: 33,
        label: 'ELEXXI -> ELEXXJ',
      },
      {
        id: 56,
        from: 47,
        to: 48,
        label: 'ELEXXK -> ELE087',
      },
    ],

  };
 
  increment(id) {
    let aux=this.state.nodesPadrao;
    aux[id-1].status=!aux[id-1].status;
    this.setState({ nodesPadrao: aux });
    console.log(this.state.nodesPadrao);
  }
 
  decrement(id) {
    let aux=this.state.nodesPadrao;
    aux[id-1].status=!aux[id-1].status;
    this.setState({ nodesPadrao: aux });
    console.log(this.state.nodesPadrao);
  }

}

函数App() {

  const dados = useUnstated(DadosUnstated);

  return (
    <div>

              {dados.state.nodesPadrao.map(p => {
              return (
                
                <DivCheckBox nomeDisciplina = {p.title} labelDisciplina = {p.label} id = {p.id}/>
                
              )})
              }

            <p>{dados.state.edgesPadrao[3].status} oiiiiii {dados.state.edgesPadrao[0].status}</p>

    </div>
  );
}

export default App;

DivCheckBox.js:

    import React, { Component } from 'react';
import Func from './func'
import { Container, useUnstated } from '@gitbook/unstated';
import DadosUnstated from 'C:/Users/decyf/Desktop/PDEG/pdeg/src/App.js'

function DivCheckBox(props){

    const dados = useUnstated(DadosUnstated);

    dados.nodesPadrao[2].status=12;

    return(
          <div>
          <p id = "pgh">{props.nomeDisciplina}</p>
          <input id="MAT001" class = {props.labelDisciplina} type="checkbox" onClick={() => Func(props.labelDisciplina,props.id)}/>
          </div>
    );
    
}

export default DivCheckBox;

Func.js：

    import { Container, useUnstated } from '@gitbook/unstated';
import DadosUnstated from 'C:/Users/decyf/Desktop/PDEG/pdeg/src/App.js'

function Func(classe,id){

    const dados = useUnstated(DadosUnstated);

    var chb = document.getElementsByClassName(classe);

    if(chb[0].checked){
        console.log("marquei o "+classe);
        
    }else if(!chb[0].checked){
        console.log("desmarquei o "+classe);
        
    }

}

export default Func;

Answer 1

问题

我认为您混淆了从App.js导出和导入以用于DivCheckBox的内容。

在App.js中

export default App;

在DivCheckBox.js中

import DadosUnstated from 'C:/Users/decyf/Desktop/PDEG/pdeg/src/App.js';

...

const dados = useUnstated(DadosUnstated);

这里，DadosUnstated是从App.js导入的缺省值，它是App React组件，而不是是定义的DadosUnstated容器。

解决方案

我认为您可能将DadosUnstated导出为名称导出

export DadosUnstated;

因此，您应该将其作为命名导入导入。

import { DadosUnstated } from 'C:/Users/decyf/Desktop/PDEG/pdeg/src/App.js';

我相信它现在将引用您期望它引用的对象，即容器，并且钩子现在应该工作。

const dados = useUnstated(DadosUnstated);