Javascript React无法读取自定义js文件的对象

我在.js文件中有一个数据库，其中包含如下对象

var cards = {
devil: {
    index: '1',
    name: 'Дьявол',
    image: 'img/cards/devil.png',
    meaning: 'devil meaning',
    shortMeaning: 'shortmeaning'
},
death: {
    index: '2',
    name: 'смерть',
    image: 'img/cards/death.png',
    meaning: 'death meaning',
    shortMeaning: 'death shortmeaning'
}
};

我在服务器上导入了这个带有webpack的Db.js：

从'/Db.js'导入{cards，cardqueue，cardback}
之前我用tag测试了它，效果很好。但现在我得到了这个错误
未捕获的TypeError:无法读取未定义的属性“name”
在image={this.state.firstCard.image}
这是部分代码

class Deck extends Component {
constructor(props) {
super(props);
this.state = {
  firstCard: cardback,
  secondCard: cardback,
  thirdCard: cardback,
  fourthCard: cardback,
  fifthCard: cardback,
  sixthCard: cardback,
  seventhCard: cardback,
  rolledCards: [],
  reloadAnimation: false,
  cardAnswer: cardqueue,
  cardDetails: 8
};
// This binding is necessary to make `this` work in the callback
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
let cardsArray = ['chariot','death','devil','emperor','empress','fool','hangedman','hermit','hierophant','highpriestess','judgment','justice','lovers','magician','moon','star','strength','sun','temperance','tower','wheeloffortune','world',];
shuffle(cardsArray);
let arrayvar = this.state.rolledCards.slice();  arrayvar.push(cardsArray[0],cardsArray[1],cardsArray[2],cardsArray[3],cardsArray[4],cardsArray[5],cardsArray[6]);
this.setState({ 
  arrayvar: arrayvar, 
  firstCard: cards[arrayvar[0]], 
  secondCard: cards[arrayvar[1]],
  thirdCard: cards[arrayvar[2]],
  fourthCard: cards[arrayvar[3]],
  fifthCard: cards[arrayvar[4]],
  sixthCard: cards[arrayvar[5]],
  seventhCard: cards[arrayvar[6]],
  cardDetails: 8
});
this.setState(prevState => ({
  reloadAnimation: !prevState.reloadAnimation
}));
}
render() {
return (
  <div className="deck-container">
    <div id="deck-flipped">
      <DeckItem onClick={this.handleClick}></DeckItem>
    </div>
    <div className="chosen-cards">
      <CardHistory 
        className={this.state.reloadAnimation ? 'card animated flipInY' : 'card animated reload-flipInY'} 
        name={this.state.firstCard.name} 
        image={this.state.firstCard.image} 
        meaning={this.state.firstCard.meaning}
        cardqueueItem={this.state.cardAnswer.first.answer}
        cardDetails={this.state.cardDetails}
        onClick={() => this.showCardDetails(0)}
      />
      {
        this.state.cardDetails==0 
          ? <CardDetails 
              image={this.state.firstCard.image} 
              answer={this.state.cardAnswer.first.answer} 
              name={this.state.firstCard.name} 
              meaning={this.state.firstCard.meaning}
              shortMeaning={this.state.firstCard.shortMeaning}
              onClick={this.closeCardDetails} 
            />
          : null
        }
   </div>
</div>
);
}
}

类组扩展组件{
建造师（道具）{
超级（道具）；
此.state={
第一张卡片：卡片背面，
第二张卡片：卡片背面，
第三张卡片：卡片背面，
第四张卡片：卡片背面，
第五张卡片：卡片背面，
第六张卡片：卡片背面，
第七张卡片：卡片背面，
滚动卡片：[]，
重新加载动画：false，
卡片回答：卡片队列，
卡片详情：8
};
//此绑定是使`This`在回调中工作所必需的
this.handleClick=this.handleClick.bind（this）；
}
handleClick（）{
让cardsArray=[‘战车’、‘死亡’、‘魔鬼’、‘皇帝’、‘皇后’、‘傻瓜’、‘吊人’、‘隐士’、‘神仙’、‘大祭司’、‘审判’、‘正义’、‘情人’、‘魔术师’、‘月亮’、‘星星’、‘力量’、‘太阳’、‘节制’、‘塔’、‘命运之轮’、‘世界’；
洗牌（cardsArray）；
设arrayvar=this.state.rolled cards.slice（）；arrayvar.push（cardsArray[0]，cardsArray[1]，cardsArray[2]，cardsArray[3]，cardsArray[4]，cardsArray[5]，cardsArray[6]）；
这个.setState（{
arrayvar:arrayvar，
第一张卡片：卡片[arrayvar[0]]，
第二张卡片：卡片[arrayvar[1]]，
第三卡片：卡片[arrayvar[2]]，
第四张卡片：卡片[arrayvar[3]]，
第五张卡片：卡片[arrayvar[4]]，
第六张卡片：卡片[arrayvar[5]]，
第七张卡片：卡片[arrayvar[6]]，
卡片详情：8
});
this.setState（prevState=>({
reloadAnimation:！prevState.reloadAnimation
}));
}
render（）{
返回(
this.showCardDetails（0）}
/>
{
this.state.cardDetails==0
? 
：null
}
);
}
}

默认情况下，
firstCard
状态包含一个
cardback
字符串和
handleClick（）
将其更改为cards[arrayvar[0]]，然后我通过firstCard.name获取对象“cards[arrayvar[0]]”的属性“name”，但现在它返回未定义。为什么会这样？在我的文本编辑器中使用
script
标记可以很好地工作，但这里没有任何标记。
尝试
module.exports=（对象）
，否则导入的对象将为空^^

或

如果您使用的是ES6，则可以通过以下方式导出/导入：

导入

import {cards, cardqueue, cardback} from './Db.js';

导出

import {cards, cardqueue, cardback} from './Db.js';

您需要将这些模块导出到
DB.js
文件中，如下所示：

export const cards = {
devil: {
    index: '1',
    name: 'Дьявол',
    image: 'img/cards/devil.png',
    meaning: 'devil meaning',
    shortMeaning: 'shortmeaning'
},
death: {
    index: '2',
    name: 'смерть',
    image: 'img/cards/death.png',
    meaning: 'death meaning',
    shortMeaning: 'death shortmeaning'
}
};

// export the other constants here ...

在您的handleClick中，在设置状态之前尝试将log
arrayvar[0]
输出。那将是什么？它总是随机的，它应该如何工作。这意味着什么？它在卡片中返回一个随机对象。我的意思是它只在我的电脑上工作，我在电脑上使用了
script
tag。页面未在服务器上呈现。我尝试了
module.exports
，但我得到了相同的错误，但现在它找不到答案的属性。：>我随机获取对象，如何正确导出？您可能必须更改“/Db.js”中的导入{cards，cardqueue，cardback}”

到

从'/Db.js'导入{恶魔，死亡}我看不到代码段中提供的导入语句：（确保您了解解构分配和Js模块。^^^有很多文档。它需要卡片、回卡和卡片队列。