Cách sử dụng fuse.js có await và k hông có await (ok)

1. Không có await

import React, { useState } from 'react';
import './App.css';
import Fuse from 'fuse.js';
import characters from './characters.json';
function App() {
  const [query, updateQuery] = useState('');
  const fuse = new Fuse(characters, {
    keys: [
      'name',
      'company',
      'species'
    ],
    includeScore: true
  });
  const results = fuse.search(query);
  function onSearch({ currentTarget }) {
    updateQuery(currentTarget.value);
  }
  const characterResults = query ? results.map(character => character.item) : characters;
  console.log(characterResults);
  return (
    <>
      <header className="App-header">
        <div className="container">
          <h1>Futurama Characters</h1>
        </div>
      </header>
      <main className="container">
        <ul className="characters">
          {
            characterResults.map((character)=> {
              const { name, company, species, thumb } = character;
              return (
                <li className="character" key={name}>
                  <span className="character-thumb" style={{backgroundImage:`url(${thumb})`}}></span>
                  <ul className="character-meta">
                    <li><strong>Name:</strong> {name}</li>
                    <li><strong>Company:</strong> {company}</li>
                    <li><strong>Species:</strong> {species}</li>
                  </ul>
                </li>
              )
            })
          }
        </ul>
        <aside>
          <form className="search">
            <label>Search</label>
            <input type="text" value={query} onChange={onSearch} />
          </form>
        </aside>
      </main>
      <footer>
        <div className="container">
          <p>
            Images from <a href="http://www.cc.com/shows/futurama">Futurama</a> via <a href="https://futurama.fandom.com/">futurama.fandom.com</a>
          </p>
        </div>
      </footer>
    </>
  )
}
export default App;

Xem ví toàn bộ ví dụ: https://app.gitbook.com/@learnreac/s/nextjs/3.-hien-thi-danh-sach-sau-khi-thuc-hien-bo-loc-ok

2. Có await

import React, { useState } from 'react';
import dynamic from 'next/dynamic';
import Header from '../components/Header';
const names = ['Tim', 'Joe', 'Bel', 'Max', 'Lee'];
const DynamicComponent1 = dynamic(() => import('./../components/hello1'));
const DynamicComponent2 = dynamic(() => import('./../components/hello2'));
const DynamicComponent3 = dynamic(() => import('./../components/hello3'));
const DynamicComponent4 = dynamic(() => import('./../components/hello4'));
const DynamicComponent5 = dynamic(() => import('./../components/hello5'));
const IndexPage = () => {
  const [falsyField] = useState(false);
  const [showMore, setShowMore] = useState(false);
  const [results, setResults] = useState('');
  return (
    <div>
      <Header />
      <DynamicComponent1 />
      <DynamicComponent2 />
      <DynamicComponent3 />
      {falsyField && <DynamicComponent4 />}
      <button onClick={() => setShowMore(!showMore)}>Toggle Show More</button>
      {showMore && <DynamicComponent5 />}
      <div style={{ marginTop: '1rem' }}>
        <input 
          type="text" 
          placeholder="Search" 
          onChange={async (e) => {
            const { value } = e.currentTarget;
            const Fuse = (await import('fuse.js')).default;
            const fuse = new Fuse(names);
            setResults(fuse.search(value));
          }}
        />
        {results}
      </div>
    </div>
  )
}

export default IndexPage;

Xem toàn bộ ví dụ: https://app.gitbook.com/@learnreac/s/nextjs/dynamic-import-ok

Last updated

Was this helpful?