将 React 与 API 调用一起使用

Question

我收到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 请求是否良好，我不确定如何测试它。

Answer 1

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

const fetchItemsAPI = (url) => {
  return fetch(url).then((res) => {
      return res.json();
    });
};

fetchItems(){
  const url ="url" #api goes here;
  fetchItemsAPI(url)
    .then(data => {
      //Here you can manipulate the json data
      this.setState({data});
    });  
}