Question

我在React中很新，需要一些帮助。我想要根据搜索词从电影数据库中显示数据。我在getMovies方法中使用fetch来获取数据。数据存储在data.Search中，但我不知道如何访问它并将其存储在变量中。

class DataService
{
    getMovies (searchTerm) {
        //let dataStorage; //store somehow data.Search inside

        fetch("http://www.omdbapi.com/?s=" + searchTerm, {
           method: 'get'
        })
        .then((resp) => resp.json())
        .then(function(data) {
            return data.Search;
        }).catch(function(error) {
            console.log(error);// Error :(
        });
    }
    //return dataStorage; //return data.Search
}

Answer 1

使用React执行异步任务有多种方法。最基本的是使用setState并在事件处理程序中启动Promise。这对于基本任务来说可能是可行的，但是稍后你会遇到竞争条件和其他讨厌的东西。

为此，您的服务应返回Promise个结果。在React端，当查询更改时，将调用该服务以获取新结果。在执行此操作时，几乎没有状态转换：设置加载标志以通知用户任务正在挂起以及promise何时解析或拒绝数据或错误存储在组件中。您所需要的只是setState方法。

更高级的技术基于Redux和redux-thunk或redux-saga中间件。您也可以考虑RxJS - 它是专门为那种提供去抖动，取消和其他功能的东西而创建的。

请使用您的DataService查看以下简单搜索视图示例。

class DataService
{
  //returns a Promise of search results, let the consumer handle errors
  getMovies (searchTerm) {
    return fetch("http://www.omdbapi.com/?s=" + searchTerm, {
      method: 'get'
    })
    .then((resp) => resp.json())
    .then(function(data) {
      return data.Search;
    })
  }
}

const SearchResults = ({data, loading, error}) => 
<div>
  {
    data && data.map(({Title, Year, imdbID, Type, Poster}) => 
      <div key={imdbID}>
        {Title} - {Year} - {Type}
        <img src={Poster} />
      </div>
    )
  }
  {loading && <div>Loading...</div>}
  {error && <div>Error {error.message}</div>}
</div>

class SearchExample extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this)
    this.state = {
      data: [],
      loading: false
    };
  }

  handleChange(event) {
    const service = new DataService();
      
    //search query is target's value
    const promise = service.getMovies(event.target.value);
      	
    //show that search is being performed
    this.setState({
      loading: true
    })
        
    //after the promise is resolved display the data or the error
    promise.then(results => {
      this.setState({
        loading: false,
        data: results
      })
    })
    .catch(error => {
      this.setState({
        loading: false,
        error: error
      })
    })
  }

  render() {
    return (
      <div>
        <input placeholder="Search..." onChange={this.handleChange} type="search" />
        <SearchResults data={this.state.data} loading={this.state.loading} error={this.state.error} />
      </div>
    )
  }
}

ReactDOM.render(<SearchExample />, document.getElementById("app"));

<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>

<div id="app"></div>

Answer 2

以下代码是您案件的正确反应方式，简单如下：

<Script..>

随时在此处发布您可能遇到的任何错误，谢谢

如何从fetch中存储数据

2 个答案: