TypeError: this.state.contracts.map не является функцией React - PullRequest
Новая
       3

TypeError: this.state.contracts.map не является функцией React

0 голосов
/ 29 февраля 2020

Я видел это раньше, но я все еще застрял. Мой код, из которого я получаю данные, выглядит следующим образом: 

 async componentDidMount(){
   try {
     const res = await 
     fetch('https://templates.accordproject.org/template-library.json');
  const data = await res.json();
  this.setState({
  contracts: data,
  });
 } catch(e) {
 console.log(e);
   }
 }

Я называю это здесь: 

 {this.state.contracts.map(contract => <Contract key={contract.id} contract={contract} />)}

Я вижу, что это состояние: 

 contracts: 

 {
"acceptance-of-delivery@0.0.3": {
    "name": "acceptance-of-delivery",
    "description": "This clause allows the receiver of goods to inspect them for a given time period after delivery.",
    "version": "0.0.3",
    "ciceroVersion": "^0.3.0",
    "type": 1
},   /// etcv for long string of json

Я получаю следующую ошибку: 

 TypeError: this.state.contracts.map is not a function

Я вполне уверен, что карта ожидает массив, но это не один. Мой вопрос:

Если это проблема, как мне сделать this.state.contracts Array, чтобы карта работала?

1 Ответ

1 голос
/ 01 марта 2020

map () - это метод массива. Вы можете использовать 

Object.keys(this.state.contracts).map(key=>({[key]:this.state.contracts[key]}))

Это преобразует объект в массив каждого контракта.

Или в приведенном выше примере вы можете попробовать: 

Object.keys(this.state.contracts).map(key=>(<Contract key={this.state.contracts[key].id} contract={this.state.contracts[key]} />))

MDN Object.keys - Подробная информация о Mozilla Dev.

Также могут помочь Object.values ​​() и Object.entries ().

...