Как я могу получить доступ к состоянию другого файла (и функции) в React JS?

Question

Ищу решение своей проблемы. Я использую библиотеку под названием unstated (https://github.com/GitbookIO/unstated). Он создает глобальное состояние для приложения reactjs. Проблема в следующем: я не могу использовать состояние, созданное для функции X в моей функции Y. В этом случае я создал свое состояние в 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);
  }

}

function 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

Проблема

Я думаю, вы перепутали то, что экспортируете, и импортируете для использования в DivCheckBox.

В :

      export default App;

В DivCheckBox.js:

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

...

const dados = useUnstated(DadosUnstated);

Вот по умолчанию импортировано из App.js, какой AppКомпонент React, а не контейнер, который был определен.

Решение

Я думаю, вы, наверное, экспортировали DadosUnstated как экспорт имен

      export DadosUnstated;

Поэтому вы должны импортировать его как именованный импорт

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

Я считаю, что теперь он будет ссылаться на объект, на который вы ожидаете ссылаться, то есть на контейнер, и теперь ловушка должна работать.

      const dados = useUnstated(DadosUnstated);