Question

我在.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： import {cards, cardqueue, cardback} from './Db.js'; 以前我使用标签测试它，它工作正常。但现在我收到了这个错误未捕获的TypeError：无法读取属性＆＃39; name＆＃39;未定义的 at 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>
);
}
}

默认firstCard状态包含cardback字符串，handleClick()将其更改为卡片[arrayvar [0]]，然后我获得属性＆＃39; name＆＃39;对象卡[arrayvar [0]]＆＃39;通过firstCard.name但现在它返回undefined。为什么会这样？它在我的文本编辑器中工作正常，使用script标签，但这里没有。

Answer 1

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

<强>导入

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 ...

Answer 2

尝试module.exports= (the object)否则导入的对象将为空白^^

或者

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'
}
};
module.exports = cards;

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

2 个答案: