使用 React 和 Axios 使用 RESTful 数据

Question

如何从 https://api.github.com/search/users?q=jason 检索数据并在 React 中呈现它？我试过类似的东西：

constructor(){
  this.state = {
    data: []            
  };
}

componentDidMount(){
    axios.get("https://api.github.com/search/users?q="+_searchTerm)
                .then(res => {
                    this.setState({
                        data: _.values(res.data.items)
                    })
                }); 
}


render() {
  const listProducts = this.state.data.map((product) => 
    <li key={product.toString()}>{product}</li>
  );

  return (
    <div>
      <ul>{listProducts}</ul>     
    </div>
   );
}

但是没用。我收到错误消息：

未处理的拒绝（不变违规）：对象作为 React 子项无效（找到：具有键 {login, id, avatar_url, gravatar_id, ... 的对象）。如果您打算渲染子集合，请改用数组或使用 React 附加组件中的 createFragment(object) 包装对象。

所以我想我必须将响应转换为数组。但是我不太确定该怎么做。

Answer 1

您返回的是对象而不是组件或字符串。

改变这个；

const listProducts = this.state.data.map((product) => 
    <li key={product.toString()}>{product}</li>
);

至此

// you need to set key to a unique string like id
const listProducts = this.state.data.map((product) => 
    <li key={product.id}>{JSON.stringify(product)}</li>
);

使用 React 和 Axios 使用 RESTful 数据

Consume RESTful data with React and Axios

reactjs

axios