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子对象（找到：具有键{object，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数据

1 个答案: