Невозможно получить результаты поиска через fetch - Github API
Я пытаюсь найти пользователей через строку поиска, используя 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
Файл json по адресу 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
},
Что я делаю здесь не так, пожалуйста, расскажите?
3 ответа
Вы можете использовать следующее (исходя из вашей ошибки):
<div>{user.items[0]}</div>
Как показано в вашем файле JSON, элементы являются объектом. Вы не можете иметь объект как дочерние элементы, только строка или число могут быть дочерними. Вы можете сделать это вместо этого:
<div>
<p>login: {user.items[0].login}</p>
// other items as well
</div>
Этот код работает. Но вам нужно вставить свою строку в 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>
Ошибка говорит о том, что вы пытаетесь отрисовать весь объект где-то. Я предполагаю, что метод рендеринга в вашем случае выглядит примерно так:
render() {
return (
<div>
{this.state.user}
</div>
)
}
Это не может быть возможным в React.
Есть несколько способов достичь желаемой цели, например:
- используйте JSON.stringify (obj),
- ИЛИ повторить весь объект.