将React与API调用一起使用

时间:2018-02-08 23:59:25

标签: javascript reactjs api

我正在Uncaught TypeError: (0 , f.default) is not a function

items component

class Items extends React.Component{
constructor(props){
super(props);
this.state = {
  itemList: [],
};
this.fetchItems = this.fetchItems.bind(this);
}
fetchItems(){
const url ="url" #api goes here;
this.setState({data: utilAPI(url)});
}

render(){
  return(
      <div className="jumbotron mx-auto jumbo-about">
        {this.fetchItems()}
        {console.log(this.state)}
        <p>{this.state.itemList}</p>
      </div>
    );
}
}

export default Items;

item utils

export const fetchItemsAPI = (url) => {
fetch(url).then((res) => {
      return res.json();
    }).then(data=>{
      return({
        champion: data.id,
        name:data.name
      });
    });
};

我不确定请求是否正在通过,因为api在我使用它时起作用。我不确定util请求是否良好,我不确定如何测试它。

1 个答案:

答案 0 :(得分:2)

您必须返回提取调用的结果。然后用它来设置状态

{"1": ["F", "1", "10", "48067", "Toy Story (1995)", "Animation|Children's|Comedy", "1246", "4", "978302091"], "2": ["M", "56", "16", "70072", "Jumanji (1995)", "Adventure|Children's|Fantasy", "1247", "5", "978298652"],