Question

我正在尝试使用Github API通过搜索字符串搜索用户我正在使用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
    },

我在做什么错，请告诉我吗？

Answer 1

您可能正在使用以下内容（假设您的错误）：

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

如您的json文件中所示，items是对象。您不能将对象作为子代，只能将字符串或数字作为子代。您可以改为：

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

Answer 2

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

user

Answer 3

该错误表明您正在尝试将整个对象渲染到某个位置。我认为render方法在您的情况下是这样的：

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

这在React中是不可能的。

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

使用 JSON.stringify（obj ）
或迭代整个对象。

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

3 个答案: