Question

反应还很新，但是我有以下要创建为列表或其他内容的API数据：

https://jsonblob.com/53c7f296-d79d-11e8-839a-a312b719c60a

我的react组件如下所示：

class Contacts extends Component {
  constructor(props) {
   super(props)
   this.state = {
     contacts:[]
   }
 }

 componentDidMount() {
   fetch('https://api.billysbilling.com/v2/contacts?organizationId=kZeGqbBRSXyeeDoWNkF3jQ',{
     headers: {
         'X-Access-Token': API_KEY,
         'Content-Type': 'application/json'
     },
   })
    .then(response => {
      return response.json();
    })
    .then(response => console.log(response))
    .then(d => {
      this.setState({ contacts: d });
      console.log("state", this.state.contacts)
    })
  }
  render() {
  return (
    <div>
      {
        this.state.contacts.map(((contact, index) =>
          <th key={`${contact.contact}${index}`}>
            <div>
              <div>
                {contact.contact}

              </div>
            </div>
          </th>
        ))
      }
    </div>
  );
}

但是它似乎什么也没返回。 console.log实际上显示了数据，所以我很困惑。如果你们中的一些人能帮助您，那将是非常棒的。

状态还只是在chrome的react工具中返回一个空数组。

Answer 1

当您编写then(response => console.log(response))时，您什么也不会返回，因此d在给以下undefined的函数中将是then。

您可以这样写：

fetch('https://api.billysbilling.com/v2/contacts?organizationId=kZeGqbBRSXyeeDoWNkF3jQ',{
  headers: {
    'X-Access-Token': API_KEY,
    'Content-Type': 'application/json'
  },
})
.then(response => {
  return response.json();
})
.then(d => {
  console.log(d);
  this.setState({ contacts: d.contacts });
});

React API返回空

1 个答案: