如何在 React 中的表单提交上使用 setState 和 fetch API？答案

【问题标题】：How to use setState with fetch API on form submit in React?如何在 React 中的表单提交上使用 setState 和 fetch API？
【发布时间】：2019-04-07 19:37:40
【问题描述】：

我是 React 新手，想尝试一下 fetchAPI。我想使用 GoogleBooks API 显示与用户可以在输入字段中输入的查询字符串匹配的书籍列表。

我已成功调用 Google API 并使用了 setState，但我无法让状态保持不变。如果我想在获取数据后呈现状态，则状态显示为未定义。

我有一种感觉，React 先渲染 HTML，然后在调用 API 后设置状态。

如果您能看看我的组件，我将不胜感激。

谢谢！

import React, {Component} from 'react'

class Search extends Component{
 constructor(props){
super(props)
this.state = {
  books: []

}
this.books = this.state.book
this.title = ''
this.handleChange = (e) => {
  this.title = e.target.value

}
this.handleSubmit = (e) => {
  let results = '';
  e.preventDefault();
  const apiKey = 'AIzaSyBuR7JI6Quo9aOc4_ij9gEqoqHtPl-t82g'
  fetch(`https://www.googleapis.com/books/v1/volumes?q=${this.title}&key=${apiKey}`)
  .then(response => response.json()).then(jsonData => {
    this.setState({
      books: jsonData
    })
    console.log(jsonData)
  })

}
}
 render(){

return(
  <div className="col-md-12">
    <form onSubmit={this.handleSubmit} className="form-group">
    <label>Enter title</label>
    <input onChange={this.handleChange} className="form-control" ref="title" type="text" placeholder="Enter title"></input>
    <button  type="submit" className="btn btn-primary">Submit</button>
    </form>
    <div>
      <li>this.state.books</li>
    </div>
  </div>

【问题讨论】：

你有什么错误吗？

标签： javascript reactjs

【解决方案1】：

你有：

<li>this.state.books</li>

这只是渲染一个字符串。

相反，您可以使用map 来显示您从响应中获得的书籍数据。

这是一个工作示例：

 <div>
   {
      this.state.books.items &&
      this.state.books.items.map(book => <li>{book.etag}</li>)
    }
 </div>

【讨论】：

这是我的疏忽。谢谢科林！