实战《React hooks useEffect 完全async await loading搜索功能》

1.引言

能学到什么(What)

本文你将学到用React 最新的hooks 实现一个最简化的搜索引擎.

能学到什么(Why)

为什么用React hooks, 这个可以函数组件中使用State, 其根本目的是共用业务状态逻辑! 简化开发, 我个人理解是比以前写一大堆DidCompomentUpdate 省好多代码, 代码简洁好多.

2.内容概述

一个搜索框, 输入关键字. 点击搜索! 打完手工. 一个搜索引擎完毕!

搜索框及搜索关键字获取

你自己做一个Google了, 哈哈. 能帮你学到点知识就好

完整代码

import Layout from '../components/MyLayout'
import Link from 'next/link'
import fetch from 'isomorphic-unfetch'

function useAsyncHook(searchBook) {
  const [result, setResult] = React.useState([])
  const [loading, setLoading] = React.useState('false')

  React.useEffect(() => {
    async function fetchBookList() {
      try {
        setLoading('true')
        const response = await fetch(
          `https://www.googleapis.com/books/v1/volumes?q=${searchBook}`
        )

        const json = await response.json()
        // console.log(json);
        setResult(
          json.items.map(item => {
            console.log(item.volumeInfo.title)
            return item.volumeInfo.title
          })
        )
      } catch (error) {
        setLoading('null')
      }
    }

    if (searchBook !== '') {
      fetchBookList()
    }
  }, [searchBook])

  return [result, loading]
}

const Search = props => {
  const [search, setSearch] = React.useState('')
  const [query, setQuery] = React.useState('')
  const [result, loading] = useAsyncHook(query)

  return (
    <Layout>
      <div className="App">
        <h1>Search for Books on any Topic</h1>
        <form
          onSubmit={e => {
            e.preventDefault()
            setQuery(search)
          }}
        >
          <label>Search : </label>
          <input type="text" onChange={e => setSearch(e.target.value)} />
          <input type="submit" value="search" />
        </form>

        {loading === 'false' ? (
          <h1>Search for Books</h1>
        ) : loading === 'null' ? (
          <h1>No Book Found</h1>
        ) : (
          result.map(item => {
            return <p>Book Title : {item}</p>
          })
        )}
      </div>
    </Layout>
  )
}

export default Search

useAsyncHook

useState 就是局部状态 useEffect 中使用 async await方法.

用户修改搜索关键字

前台页面中用户输入关键字 onChange事件触发, 利用setSearch, 修改了State: search的值

点击搜索按钮.

触发Form 的Submit事件.setQuery 修改了query: state

searchBook 变化

query steate 修改,其实是searchBook修改. 这个是时候出发了异步的 useAsyncHook

useEffect 里面调用异步api

searchBook 变化出发调用 async await fetchBookList 等待结果回调.

结果返回 setResult

前端显示搜索结果

result.map 显示搜索结果列表!

一个搜索引擎的基本功能实现完毕. 当然这里是调用后端api 完成搜索.

总结

React hooks 比之前进步好多. 代码简洁很多!

实战 《React hooks useEffect 完全async await loading搜索功能》