json - 无法通过 fetch 获取搜索结果 - Github API

Question

我正在尝试使用 Github API 通过搜索字符串搜索用户我正在使用 fetch 与 url 但无法访问结果 json。

这是我获取数据的地方

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

控制台的输出如下

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

https://api.github.com/search/users?q=ddd处的 json 文件

{
  "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
    },

我在这里做错了什么，请告诉我？

score 1 · Accepted Answer

您可能使用如下（假设您的错误）：

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

如您的 json 文件所示，项目是对象。您不能将对象作为子对象，只能将字符串或数字作为子对象。你可以这样做：

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

score 1 · Accepted Answer

此代码有效。但是您需要将字符串粘贴到q参数中。

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>

score 0 · Accepted Answer

该错误表明您正在尝试在某处渲染整个对象。我假设在你的情况下渲染方法是这样的：

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

这在 React 中是不可能的。

有几种方法可以实现预期目标，例如：

使用JSON.stringify(obj )，
或迭代整个对象。

json - 无法通过 fetch 获取搜索结果 - Github API

3 回答 3

Related

Reference