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> 
    ); 
} 

그러나 그것은 작동하지 않았다.

처리 할 수없는 거부 (Invariant Violation) : 개체가 React 하위로 유효하지 않습니다 (발견 된 개체 : 키가 {login, id, avatar_url, gravatar_id, ... 인 개체). 자식 컬렉션을 렌더링하려는 경우 배열을 사용하거나 React 애드온의 createFragment (object)를 사용하여 객체를 래핑하십시오.

그래서 추측 컨대 배열로 응답을 변환해야합니다. 그러나 나는 그것을하는 방법을 너무 확신하지 못한다.

Answer 1

구성 요소 또는 문자열이 아닌 개체를 반환합니다.

변경하십시오. 이

// 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> 
);