Question

Visual Studio React.js入门套件

我不知道为什么在处理fetch后显示组件没有刷新？＆＃39; setResults＆＃39;正确调用函数，并设置数据，但库组件永远不会获取更新的数据。我该如何实现这一目标？组件刚刚设置错误吗？

使用“哈利波特”搜索googleapis book api。例如。我得到了10个结果。但是图库从未使用找到的数据进行更新。我需要触发什么来制作画廊＆＃39;显示新发现的数据？

我猜测因为fetch.then.then异步是在后台，画廊组件是不是以某种方式通知了？我在暗中做出反应和异步电话。

主要成分：

'use strict';

var React = require('react');
var BookGallery = require('./BookGallery.jsx');

var BookSearch = React.createClass({
  getInitialState() {
    return {
      query: '',
      books: []
    };
  },
  setResults(value) {
    this.books = value.items;
    if (this.books) {
      console.log('count of books found: ' + this.books.length);
    } else {
      console.log('nothing found!');
    }
  },
  search() {
    const BASE_URL = 'https://www.googleapis.com/books/v1/volumes?q=';

    if (this.query) {
      console.log("Do the search with " + this.query);

      fetch(BASE_URL + this.query, { method: 'GET' })
        .then(response => response.json())
        .then(json => this.setResults(json));


    } else {
      console.log("Nothing to search for...");

    }
  },

  render() {
    return (

      <div className="Global">
        <h3>Book Search</h3>
        <p>
          <input
              type="search"
              id="inputBookTitle"
              onChange={event => this.query = event.target.value}
              onKeyUp={event => {
                if (event.key == "Enter") {
                  this.search();
                }
              }}
            />
          <span style={{ border: '1px solid garkgrey', padding : '5px', background: 'lightgray' }} >
            <span className="glyphicon glyphicon-search" onClick={() => this.search()} ></span>
          </span>
        </p> 
        <BookGallery list={this.books}/>
      </div>
    );
  }
});

module.exports = BookSearch;

然后是画廊组件：

'use strict';

var React = require('react');

var BookGallery = React.createClass({
  getInitialState() {
    return {
      books: []
    };
  },
  rate() {

    console.log("Rate the book");
  },
  render() {
    this.books = this.props.list || [];
    console.log(this.books);
    return (
      <div id="bookContainer" >
        <h4>Results:</h4>
        <ul id="gallery">
          {
            this.books.map((item, index) =>
              <li key={index}>{book}</li>
            )
          }
        </ul>
      </div>
    );
  }
});

module.exports = BookGallery;

Answer 1

this.books = value.items;

应该是

this.setState({books: value.items});

React决定何时根据setState调用呈现状态，而不仅仅是改变状态。

此外，您似乎假设状态位于this上，而不是this.state，所以无论您在何处引用this.books进行渲染，应该指this.state.books。

React.js组件在获取后永远不会刷新

1 个答案: