地图功能值不显示

Question

在console.log 中显示 api 获取的数据，但在浏览器中显示 只显示白屏。在map函数中必须更新状态函数

import React, { Component } from 'react';;
import * as algoliasearch from "algoliasearch";
class App extends React.Component {

  constructor() {
    super();
    this.state = {
      data: { hits: [] }
    }
    // set data to string instead of an array  
  }

  componentDidMount() {
    this.getData();
  }

  getData() {
    var client = algoliasearch('api-id', 'apikey');
    var index = client.initIndex('');
    //index.search({ query:""}, function(data){  console.log(data) })    
    //index.search({ query:""}, function(data){  console.log("DataRecib=ved. First check this") }) 

    index.search({
      query: "",
      attributesToRetrieve: ['ItemRate', 'Color'],
      hitsPerPage: 50,
    },
    function searchDone(error, data) {
      console.log(data.hits)
    });
  }

  render() {
    return (
      <div id="root">
        {
          this.state.data.hits.map(function (data, index) {
            return
            <h1>{this.setState.data.ItemRate}<br />{data.Color}</h1> >            
            })}
      </div>
    );
  }
}
//render(<App />, document.getElementById('app')); 
export default App;

Answer 1

几个错误-:

• 您只需要使用this.state.data.ItemRate 而不是this.setState.data.ItemRate。
• 您可以使用箭头函数 (.)=> { 获取 .map 内部的状态。 }

• 访问https://www.sitepoint.com/es6-arrow-functions-new-fat-concise-syntax-javascript/

  render() {
  
  return (
    <div id="root" >
  
  
    {
  
     this.state.data.hits.map((data,index) => {
  
      return<h1>{this.state.data.ItemRate}<br />{data.Color}</h1>
     }
  

Answer 2

每个this.setState 都会触发一个render() 调用。如果你在 render 方法中setState，你会进入一个无限循环。

你想在getData()函数中更新this.state.data.hits，那么你可以像这样显示数据：

this.state.data.hits.map(data =>
  <h1>{data.Color}</h1>
)

---

例如，如果console.log(data.hits) 注销了正确的数据，那么您可以：

this.setState({
  data: {
    hits: data.hits
  }
})

---

编辑：

使用你提供的代码，应该是这样的：'

getData = () => {
  var client = algoliasearch('A5WV4Z1P6I', '9bc843cb2d00100efcf398f4890e1905');
  var index = client.initIndex('dev_twinning');
  //index.search({ query:""}, function(data){ console.log(data) }) 
  // index.search({ query:""}, function(data){ console.log("Data Recib=ved. First check this") }) 
  index.search({
    query: "",
    attributesToRetrieve: ['ItemRate', 'Color'],
    hitsPerPage: 50,
  }, searchDone = (error, data) => {
    this.setState({
      data: {
        hits: data.hits
      }
    })
    console.log(data.hits)
  })
}