问题

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

}

函数应用（）{

  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 组件，不是{{1} } 已定义的容器。

解决方案

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

DadosUnstated

所以你应该将它作为命名导入导入

export DadosUnstated;

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

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

如何在 React JS 中访问另一个文件（和函数）的状态？

1 个答案:

问题

解决方案