stackoom
  简体   繁体   中英

Unable to fetch search results via fetch - Github API

 原文  2019-01-22 09:46:06  1   3    json/ reactjs/ api/ fetch/ github-api-v3

Question

I am trying to search users via a search String using Github API I am using fetch with the url but unable to access the result json.

This is where I am fetching the data 

componentDidMount() {
    console.log(this.props.searchString);
    let furl = 'https://api.github.com/search/users?q='.concat(
      this.props.searchString
    );
    console.log(furl);
    fetch(furl)
      .then(res => res.json())
      .then(json => {
        this.setState({
          isLoaded: true,
          user: json
        });
      });
    console.log(this.state.user);
    console.log(this.state.user.total_count);
}

render() {
    var { isLoaded, user } = this.state;
    if (!isLoaded) {
      return <div>Loading ....</div>;
    } else {
      return (
        <Fragment>
          <Switch>
            <Route
              exact
              path="/"
              render={() => (
                <Fragment>
                  <div className="list-User">
                    <ul className="user-unordered-list">
                      {user.map(user => (
                        <li key={user.id}>
                          <div className="user-info">
                            <img src={user.avatar_url} />
                            <h1> {user.login}</h1>
                            <p>
                              <a href={user.html_url}>Github Profile</a>
                            </p>
                          </div>
                        </li>
                      ))}
                    </ul>
                  </div>
                </Fragment>
              )}
            />
            <Route
              path="/search"
              render={({ history }) => (
                <Fragment>
                  <UserSearch searchString={this.state.query} />
                </Fragment>
              )}
            />
            <Route
              path="/user/m"
              render={({ history }) => (
                <div className="user-profile">
                  <User />
                </div>
              )}
            />
            }
          </Switch>
        </Fragment>
      );
    }

The output from the console is as follows 

ddd
UserSearch.js:19 https://api.github.com/search/users?q=ddd
UserSearch.js:29 []length: 0__proto__: Array(0)
react-dom.development.js:57 Uncaught Error: Objects are not valid as a React child (found: object with keys {login, id, node_id, avatar_url, gravatar_id, url, html_url, followers_url, following_url, gists_url, starred_url, subscriptions_url, organizations_url, repos_url, events_url, received_events_url, type, site_admin, score}). If you meant to render a collection of children, use an array instead.
    in div (at UserSearch.js:86)
    in UserSearch (at App.js:201)
    in Route (at App.js:151)
    in Switch (at App.js:150)
    in App (at src/index.js:9)
    in Router (created by BrowserRouter)
    in BrowserRouter (at src/index.js:8)
    at invariant (react-dom.development.js:57)
    at throwOnInvalidObjectType (react-dom.development.js:13607)
    at createChild (react-dom.development.js:13834)
    at reconcileChildrenArray (react-dom.development.js:14080)
    at reconcileChildFibers (react-dom.development.js:14430)
    at reconcileChildren (react-dom.development.js:14817)
    at updateFragment (react-dom.development.js:14983)
    at beginWork (react-dom.development.js:16009)
    at performUnitOfWork (react-dom.development.js:19102)
    at workLoop (react-dom.development.js:19143)
    at HTMLUnknownElement.callCallback (react-dom.development.js:147)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:196)
    at invokeGuardedCallback (react-dom.development.js:250)
    at replayUnitOfWork (react-dom.development.js:18350)
    at renderRoot (react-dom.development.js:19261)
    at performWorkOnRoot (react-dom.development.js:20165)
    at performWork (react-dom.development.js:20075)
    at performSyncWork (react-dom.development.js:20049)
    at requestWork (react-dom.development.js:19904)
    at scheduleWork (react-dom.development.js:19711)
    at Object.enqueueSetState (react-dom.development.js:12936)
    at UserSearch.push../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:356)
    at UserSearch.js:23
invariant @ react-dom.development.js:57
throwOnInvalidObjectType @ react-dom.development.js:13607
createChild @ react-dom.development.js:13834
reconcileChildrenArray @ react-dom.development.js:14080
reconcileChildFibers @ react-dom.development.js:14430
reconcileChildren @ react-dom.development.js:14817
updateFragment @ react-dom.development.js:14983
beginWork @ react-dom.development.js:16009
performUnitOfWork @ react-dom.development.js:19102
workLoop @ react-dom.development.js:19143
callCallback @ react-dom.development.js:147
invokeGuardedCallbackDev @ react-dom.development.js:196
invokeGuardedCallback @ react-dom.development.js:250
replayUnitOfWork @ react-dom.development.js:18350
renderRoot @ react-dom.development.js:19261
performWorkOnRoot @ react-dom.development.js:20165
performWork @ react-dom.development.js:20075
performSyncWork @ react-dom.development.js:20049
requestWork @ react-dom.development.js:19904
scheduleWork @ react-dom.development.js:19711
enqueueSetState @ react-dom.development.js:12936
push../node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:356
(anonymous) @ UserSearch.js:23
Promise.then (async)
componentDidMount @ UserSearch.js:21
commitLifeCycles @ react-dom.development.js:16998
commitAllLifeCycles @ react-dom.development.js:18512
callCallback @ react-dom.development.js:147
invokeGuardedCallbackDev @ react-dom.development.js:196
invokeGuardedCallback @ react-dom.development.js:250
commitRoot @ react-dom.development.js:18717
completeRoot @ react-dom.development.js:20247
performWorkOnRoot @ react-dom.development.js:20170
performWork @ react-dom.development.js:20075
performSyncWork @ react-dom.development.js:20049
interactiveUpdates$1 @ react-dom.development.js:20337
interactiveUpdates @ react-dom.development.js:2267
dispatchInteractiveEvent @ react-dom.development.js:5083
index.js:1446 The above error occurred in one of your React components:
    in div (at UserSearch.js:86)
    in UserSearch (at App.js:201)
    in Route (at App.js:151)
    in Switch (at App.js:150)
    in App (at src/index.js:9)
    in Router (created by BrowserRouter)
    in BrowserRouter (at src/index.js:8)

Consider adding an error boundary to your tree to customize error handling behavior.

function.console.(anonymous function) @ index.js:1446
logCapturedError @ react-dom.development.js:16764
logError @ react-dom.development.js:16800
update.callback @ react-dom.development.js:17814
callCallback @ react-dom.development.js:11743
commitUpdateEffects @ react-dom.development.js:11783
commitUpdateQueue @ react-dom.development.js:11773
commitLifeCycles @ react-dom.development.js:17055
commitAllLifeCycles @ react-dom.development.js:18512
callCallback @ react-dom.development.js:147
invokeGuardedCallbackDev @ react-dom.development.js:196
invokeGuardedCallback @ react-dom.development.js:250
commitRoot @ react-dom.development.js:18717
completeRoot @ react-dom.development.js:20247
performWorkOnRoot @ react-dom.development.js:20170
performWork @ react-dom.development.js:20075
performSyncWork @ react-dom.development.js:20049
requestWork @ react-dom.development.js:19904
scheduleWork @ react-dom.development.js:19711
enqueueSetState @ react-dom.development.js:12936
push../node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:356
(anonymous) @ UserSearch.js:23
Promise.then (async)
componentDidMount @ UserSearch.js:21
commitLifeCycles @ react-dom.development.js:16998
commitAllLifeCycles @ react-dom.development.js:18512
callCallback @ react-dom.development.js:147
invokeGuardedCallbackDev @ react-dom.development.js:196
invokeGuardedCallback @ react-dom.development.js:250
commitRoot @ react-dom.development.js:18717
completeRoot @ react-dom.development.js:20247
performWorkOnRoot @ react-dom.development.js:20170
performWork @ react-dom.development.js:20075
performSyncWork @ react-dom.development.js:20049
interactiveUpdates$1 @ react-dom.development.js:20337
interactiveUpdates @ react-dom.development.js:2267
dispatchInteractiveEvent @ react-dom.development.js:5083
react-dom.development.js:57 Uncaught (in promise) Error: Objects are not valid as a React child (found: object with keys {login, id, node_id, avatar_url, gravatar_id, url, html_url, followers_url, following_url, gists_url, starred_url, subscriptions_url, organizations_url, repos_url, events_url, received_events_url, type, site_admin, score}). If you meant to render a collection of children, use an array instead.
    in div (at UserSearch.js:86)
    in UserSearch (at App.js:201)
    in Route (at App.js:151)
    in Switch (at App.js:150)
    in App (at src/index.js:9)
    in Router (created by BrowserRouter)
    in BrowserRouter (at src/index.js:8)
    at invariant (react-dom.development.js:57)
    at throwOnInvalidObjectType (react-dom.development.js:13607)
    at createChild (react-dom.development.js:13834)
    at reconcileChildrenArray (react-dom.development.js:14080)
    at reconcileChildFibers (react-dom.development.js:14430)
    at reconcileChildren (react-dom.development.js:14817)
    at updateFragment (react-dom.development.js:14983)
    at beginWork (react-dom.development.js:16009)
    at performUnitOfWork (react-dom.development.js:19102)
    at workLoop (react-dom.development.js:19143)
    at renderRoot (react-dom.development.js:19228)
    at performWorkOnRoot (react-dom.development.js:20165)
    at performWork (react-dom.development.js:20075)
    at performSyncWork (react-dom.development.js:20049)
    at requestWork (react-dom.development.js:19904)
    at scheduleWork (react-dom.development.js:19711)
    at Object.enqueueSetState (react-dom.development.js:12936)
    at UserSearch.push../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:356)
    at UserSearch.js:23
invariant @ react-dom.development.js:57
throwOnInvalidObjectType @ react-dom.development.js:13607
createChild @ react-dom.development.js:13834
reconcileChildrenArray @ react-dom.development.js:14080
reconcileChildFibers @ react-dom.development.js:14430
reconcileChildren @ react-dom.development.js:14817
updateFragment @ react-dom.development.js:14983
beginWork @ react-dom.development.js:16009
performUnitOfWork @ react-dom.development.js:19102
workLoop @ react-dom.development.js:19143
renderRoot @ react-dom.development.js:19228
performWorkOnRoot @ react-dom.development.js:20165
performWork @ react-dom.development.js:20075
performSyncWork @ react-dom.development.js:20049
requestWork @ react-dom.development.js:19904
scheduleWork @ react-dom.development.js:19711
enqueueSetState @ react-dom.development.js:12936
push../node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:356
(anonymous) @ UserSearch.js:23
Promise.then (async)
componentDidMount @ UserSearch.js:21
commitLifeCycles @ react-dom.development.js:16998
commitAllLifeCycles @ react-dom.development.js:18512
callCallback @ react-dom.development.js:147
invokeGuardedCallbackDev @ react-dom.development.js:196
invokeGuardedCallback @ react-dom.development.js:250
commitRoot @ react-dom.development.js:18717
completeRoot @ react-dom.development.js:20247
performWorkOnRoot @ react-dom.development.js:20170
performWork @ react-dom.development.js:20075
performSyncWork @ react-dom.development.js:20049
interactiveUpdates$1 @ react-dom.development.js:20337
interactiveUpdates @ react-dom.development.js:2267
dispatchInteractiveEvent @ react-dom.development.js:5083

The json file at https://api.github.com/search/users?q=ddd 

{
  "total_count": 3056,
  "incomplete_results": false,
  "items": [
    {
      "login": "ddd",
      "id": 400620,
      "node_id": "MDQ6VXNlcjQwMDYyMA==",
      "avatar_url": "https://avatars0.githubusercontent.com/u/400620?v=4",
      "gravatar_id": "",
      "url": "https://api.github.com/users/ddd",
      "html_url": "https://github.com/ddd",
      "followers_url": "https://api.github.com/users/ddd/followers",
      "following_url": "https://api.github.com/users/ddd/following{/other_user}",
      "gists_url": "https://api.github.com/users/ddd/gists{/gist_id}",
      "starred_url": "https://api.github.com/users/ddd/starred{/owner}{/repo}",
      "subscriptions_url": "https://api.github.com/users/ddd/subscriptions",
      "organizations_url": "https://api.github.com/users/ddd/orgs",
      "repos_url": "https://api.github.com/users/ddd/repos",
      "events_url": "https://api.github.com/users/ddd/events{/privacy}",
      "received_events_url": "https://api.github.com/users/ddd/received_events",
      "type": "User",
      "site_admin": false,
      "score": 104.69152
    },
    {
      "login": "dddaisuke",
      "id": 96539,
      "node_id": "MDQ6VXNlcjk2NTM5",
      "avatar_url": "https://avatars2.githubusercontent.com/u/96539?v=4",
      "gravatar_id": "",
      "url": "https://api.github.com/users/dddaisuke",
      "html_url": "https://github.com/dddaisuke",
      "followers_url": "https://api.github.com/users/dddaisuke/followers",
      "following_url": "https://api.github.com/users/dddaisuke/following{/other_user}",
      "gists_url": "https://api.github.com/users/dddaisuke/gists{/gist_id}",
      "starred_url": "https://api.github.com/users/dddaisuke/starred{/owner}{/repo}",
      "subscriptions_url": "https://api.github.com/users/dddaisuke/subscriptions",
      "organizations_url": "https://api.github.com/users/dddaisuke/orgs",
      "repos_url": "https://api.github.com/users/dddaisuke/repos",
      "events_url": "https://api.github.com/users/dddaisuke/events{/privacy}",
      "received_events_url": "https://api.github.com/users/dddaisuke/received_events",
      "type": "User",
      "site_admin": false,
      "score": 74.155464
    },

What am i doing wrong here,please tell ?

3 answers

solution1
 1 ACCPTED  2019-01-22 09:59:45

You might be using as following(assuming from your error): 

<div>{user.items[0]}</div>

As shown in you json file, items is object. You cannot have object as children, only string or number can be children. You can do this instead: 

<div>
   <p>login: {user.items[0].login}</p>
   // other items as well
</div>

solution2
 1  2019-01-22 10:00:26

This code works. But you need to paste your string to q parameter. 

 function App() { return ( <div className="App"> <Some /> </div> ); } class Some extends React.Component { state = { isLoaded: false, users: {}, total: 0 }; componentDidMount() { let furl = "https://api.github.com/search/users?q=ddd"; fetch(furl) .then(res => res.json()) .then(({items, total_count}) => { this.setState(() => ({ isLoaded: true, users: items, total: total_count })); }); } renderUsers = users => users.map(({ id, login, avatar_url }) => ( <div key={id}> <img src={avatar_url} /> <p>{login}</p> </div> )); render() { const { users, isLoaded } = this.state; console.log(users); return <div>{isLoaded ? this.renderUsers(users) : null}</div>; } } // Render it ReactDOM.render(<App />, document.getElementById("root")); 
 <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

solution3
 0  2019-01-22 10:00:33

The error says that you're trying to render the whole object somewhere. I assume that the render method is something like this in your case: 

render() {
   return (
      <div>
         {this.state.user}
      </div>
   )
}

This can't be possible in React.

There are a couple of ways to achieve the desired goal, for example:

  • use JSON.stringify(obj ),
  • OR iterate the whole object.

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Using Wikipedia's API to fetch results from search query API - JSON fetch returning empty results Calling a API via fetch() - Unexpected end of input Unable to fetch Education details in linkedin Rest API Unable to fetch resource with fetch, NetworkError React Native, Fetch specific data from API Results Why does looping through a fetch API response give undefined results? Cant access get results from fetch api request Django - fetch coinmarketcap pro api results in “string indices must be integers” How to get the latest row added via fetch api
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM