React не может читать объект таможни файл

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

И я импортировал этот Db.js с WebPack на сервере: import {cards, cardqueue, cardback} from './Db.js'; Раньше я проверил его с помощью и он работал нормально. Но теперь я получаю эту ошибку неперехваченным TypeError: Не удается прочитать «имя» свойства неопределенной на изображение = {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 string и handleClick() изменяет его на карты [arrayvar [0]], а затем я получаю свойство 'name' of object 'cards [arrayvar [0]]' 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;