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
Previous3. Sử dụng fuse.js để thực hiện lọc chú ý cách sử dụng Fuse = (await import('fuse.js')).default (ok)NextDynamic Import (ok)
Last updated
Was this helpful?