时间戳

首页 > 解决方案 > API 调用将数据读入控制台，但不会添加到 State

javascript - API 调用将数据读入控制台，但不会添加到 State

问题描述

我正在尝试搜索 Hacker News。我只需做一个console.log（res.data.hits）就可以在控制台中工作。如果您在搜索中键入“apple”，您会看到控制台中弹出一堆评论，其中包含单词 apple，因此该部分有效。我想知道如何让它显示在 DOM 中。我一直在尝试将数据添加到 State 中的数组中，但它似乎不喜欢它。这很奇怪，因为我在另一个项目中以完全相同的方式执行了另一个 API 调用，并且那个调用有效，并且看起来这个 API 的数据结构是相同的。下面我将讲述不同的代码块。第一个是一个不同的项目，我以与尝试调用 HN API 完全相同的方式调用了 Random User API。

随机用户 API：（有效）

  componentDidMount = () => {
    axios.get('https://randomuser.me/api?results=25')
    .then(res => {
  this.setState({
    data: res.data.results
        })
    })

}

HN API：（在我输入 console.log(res.data.hits) 时有效，但在我尝试将该数组添加到 State 时无效。）

getbyComment = (e) => {
  e.preventDefault()
    axios.get(`http://hn.algolia.com/api/v1/search?query=${this.state.term}&tags=comment`)
    .then(res => {
    console.log(res.data.hits)})

}

不起作用：

getbyComment = (e) => {
  e.preventDefault()
    axios.get(`http://hn.algolia.com/api/v1/search?query=${this.state.term}&tags=comment`)
    .then(res => 
       { this.setState({data: res.data.hits}) 
    } 
    )
}

希望现在你可以看到这可能会给 React 新手带来困惑。我最好的猜测是 HN API 的数据结构中有些东西我没有发现。当我控制台记录它时 res.data.hits 似乎是 [{...},{...}] 形式的数组，就像随机用户一样。以下是我尝试从 HN API 检索并将其添加到 State 时收到的错误消息。

Error: Objects are not valid as a React child (found: object with keys {created_at, title, url, author, points, story_text, comment_text, num_comments, story_id, story_title, story_url, parent_id, created_at_i, relevancy_score, _tags, objectID, _highlightResult}). If you meant to render a collection of children, use an array instead.
    in div (at App.js:42)
    in App (at src/index.js:9)
    in StrictMode (at src/index.js:8)

有了这个，我在下面留下文档其余部分的代码，以防有助于回答问题。如果需要更多信息，请告诉我。

    import React from 'react';
    import './App.css';
    import axios from 'axios';

    class App extends React.Component {
      state = {
        term: '',
        option: 'story',
        data: []
      }

      handleChange = (event) => {
        const query = event.target.value
        this.setState({ term: query })
        // console.log(this.state)
      }


    //res.data.hits
    getbyComment = (e) => {
      e.preventDefault()
        axios.get(`http://hn.algolia.com/api/v1/search?query=${this.state.term}&tags=comment`)
        .then(res => 
           { this.setState({data: res.data.hits}) 
        })

    }

      render(){
        return(
          <div>
            <form onSubmit={this.getbyComment}>
            <input placeholder="search for" onChange={this.handleChange} value={this.state.term} />
            <input type="submit" value="Submit" />

            </form>
            {this.state.data}
          </div>
        )
        }
    }

    export default App;

标签： javascriptreactjsapi

解决方案

您似乎已经得出结论，您的hits数组包含对象（“ [{...},{...}]”）。React 不支持渲染通用对象，您必须将其解析为 React 可以渲染的内容，例如 React 元素或字符串。

要将对象解析为字符串，您可以简单地使用JSON.stringify()：

{ this.state.data.map(item => JSON.stringify(item)) }

您可能希望对数据做一些更详细的处理，但关键是您需要了解数据的结构并为它编写自己的解析器。

推荐阅读