Làm cách nào để tìm nạp dữ liệu trong tùy chọn được chọn?

Xử lý các đầu vào có thể lựa chọn trên các trang web là một điều mà hầu hết các nhà phát triển không thích tham gia. Một số trang web người dùng yêu cầu người dùng chọn từ danh sách các tùy chọn áp dụng cho họ, có thể yêu cầu nhiều lựa chọn hoặc có thể yêu cầu người dùng tạo một mục nhập duy nhất cho trường. Khi xây dựng các thành phần đầu vào có thể lựa chọn phức tạp này, chúng tôi có xu hướng sử dụng các thư viện thành phần. Trong trường hợp của tôi, tôi sử dụng Reac-select

React-select là gói React để nhanh chóng tạo vùng chứa Đầu vào linh hoạt. Nó được phát triển để thay thế cho phần tử

import './App.css';
import Select from 'react-select';
const selectableOptions = [
  { value: 'Adam', label: 'Adam Geoffrey' },
  { value: 'Jane', label: 'Jane Hibbard' },
  { value: 'Anabelle', label: 'Anabelle Einstein' },
  { value: 'Zeus', label: 'Zeus McQueen' }
]
function App[] {
  return [
    
      
    
  ];
}
export default App;

6 của React. Phần tử đó được sử dụng để tạo danh sách thả xuống các mục để người dùng chọn từ. React-select đưa mọi thứ đi xa hơn một chút so với các tính năng được cung cấp bởi phần tử

import './App.css';
import Select from 'react-select';
const selectableOptions = [
  { value: 'Adam', label: 'Adam Geoffrey' },
  { value: 'Jane', label: 'Jane Hibbard' },
  { value: 'Anabelle', label: 'Anabelle Einstein' },
  { value: 'Zeus', label: 'Zeus McQueen' }
]
function App[] {
  return [
    
      
    
  ];
}
export default App;

6 bằng cách cung cấp các tính năng có thể tùy chỉnh dễ dàng để tạo các tùy chọn thả xuống. Các tính năng được cung cấp bởi gói này bao gồm các trường đầu vào có tính năng tự động hoàn thành, danh sách các tùy chọn có thể chọn có thể được tùy chỉnh cho nhiều lựa chọn, lệnh gọi không đồng bộ và tính năng tạo mục nhập mới. React-Select sử dụng đơn giản và có thể được tùy chỉnh để đáp ứng các yêu cầu khác nhau. Dưới đây là một GIF hiển thị các tính năng React-Select

Trong hướng dẫn này, chúng ta sẽ xây dựng một thành phần đầu vào tùy chỉnh trong một dự án bằng cách sử dụng React-Select. Với nó, chúng tôi sẽ trình bày các tùy chọn lựa chọn khác nhau, chẳng hạn như tìm kiếm đơn lẻ, tìm kiếm nhiều lần và tìm kiếm có thể tạo trong đó người dùng có thể tạo các mục không tồn tại. Chúng tôi cũng sẽ trình bày cách chúng tôi có thể sử dụng nguồn dữ liệu như API để điền vào các mục đã chọn

Tạo một dự án mẫu

Đối với bài viết này, chúng tôi sẽ sử dụng React. js, Axios và React-select. Chúng ta có thể cài đặt cái này qua CLI bằng các lệnh sau, lệnh này sẽ thiết lập thư mục dự án React có tên là

import './App.css';
import Select from 'react-select';
const selectableOptions = [
  { value: 'Adam', label: 'Adam Geoffrey' },
  { value: 'Jane', label: 'Jane Hibbard' },
  { value: 'Anabelle', label: 'Anabelle Einstein' },
  { value: 'Zeus', label: 'Zeus McQueen' }
]
function App[] {
  return [
    
      
    
  ];
}
export default App;

8 với sự phụ thuộc cần thiết

npx create-react-app react-select
cd react-select
npm install axios react-select --save

Sau khi cài đặt hoàn tất, hãy mở thư mục dự án trong trình chỉnh sửa mã của bạn. Trong tệp

import './App.css';
import Select from 'react-select';
const selectableOptions = [
  { value: 'Adam', label: 'Adam Geoffrey' },
  { value: 'Jane', label: 'Jane Hibbard' },
  { value: 'Anabelle', label: 'Anabelle Einstein' },
  { value: 'Zeus', label: 'Zeus McQueen' }
]
function App[] {
  return [
    
      
    
  ];
}
export default App;

9, chúng tôi sẽ thêm một lần nhập cho gói

import './App.css';
import Select from 'react-select';
const selectableOptions = [
  { value: 'Adam', label: 'Adam Geoffrey' },
  { value: 'Jane', label: 'Jane Hibbard' },
  { value: 'Anabelle', label: 'Anabelle Einstein' },
  { value: 'Zeus', label: 'Zeus McQueen' }
]
function App[] {
  return [
    
      
    
  ];
}
export default App;

8 và xác định một mảng các mục danh sách có thể chọn

import './App.css';
import Select from 'react-select';
const selectableOptions = [
  { value: 'Adam', label: 'Adam Geoffrey' },
  { value: 'Jane', label: 'Jane Hibbard' },
  { value: 'Anabelle', label: 'Anabelle Einstein' },
  { value: 'Zeus', label: 'Zeus McQueen' }
]
function App[] {
  return [
    
      
    
  ];
}
export default App;

Để tạo phong cách tốt hơn cho ứng dụng, hãy thêm các dòng sau vào

.App{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.input-cont{
  width: 700px;
}
button{
  padding: 8px 15px;
  border: none;
  color: #fff;
  background-color: rgb[79, 79, 237];
  border-radius: 8px;
  margin-top: 5px;
}

1

.App{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.input-cont{
  width: 700px;
}
button{
  padding: 8px 15px;
  border: none;
  color: #fff;
  background-color: rgb[79, 79, 237];
  border-radius: 8px;
  margin-top: 5px;
}

Để chạy ứng dụng, hãy nhập

.App{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.input-cont{
  width: 700px;
}
button{
  padding: 8px 15px;
  border: none;
  color: #fff;
  background-color: rgb[79, 79, 237];
  border-radius: 8px;
  margin-top: 5px;
}

2 trong CLI và mở trình duyệt của bạn trên URL

.App{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.input-cont{
  width: 700px;
}
button{
  padding: 8px 15px;
  border: none;
  color: #fff;
  background-color: rgb[79, 79, 237];
  border-radius: 8px;
  margin-top: 5px;
}

3. Ở đây, chúng tôi nhận được một kết quả tương tự như hình dưới đây

Ở trên, chúng tôi có trường

import './App.css';
import Select from 'react-select';
const selectableOptions = [
  { value: 'Adam', label: 'Adam Geoffrey' },
  { value: 'Jane', label: 'Jane Hibbard' },
  { value: 'Anabelle', label: 'Anabelle Einstein' },
  { value: 'Zeus', label: 'Zeus McQueen' }
]
function App[] {
  return [
    
      
    
  ];
}
export default App;

8 với danh sách thả xuống các mục. Chúng tôi cũng có thể lọc các mục danh sách bằng trường nhập liệu. Thêm

.App{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.input-cont{
  width: 700px;
}
button{
  padding: 8px 15px;
  border: none;
  color: #fff;
  background-color: rgb[79, 79, 237];
  border-radius: 8px;
  margin-top: 5px;
}

5 vào thuộc tính

.App{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.input-cont{
  width: 700px;
}
button{
  padding: 8px 15px;
  border: none;
  color: #fff;
  background-color: rgb[79, 79, 237];
  border-radius: 8px;
  margin-top: 5px;
}

6 để cho phép nhiều lựa chọn

import './App.css';
import Select from 'react-select';
const selectableOptions = [
  { value: 'Adam', label: 'Adam Geoffrey' },
  { value: 'Jane', label: 'Jane Hibbard' },
  { value: 'Anabelle', label: 'Anabelle Einstein' },
  { value: 'Zeus', label: 'Zeus McQueen' }
]
function App[] {
  return [
    
      
    
  ];
}
export default App;

4

Khi điều này được thực hiện, chúng tôi có thể thêm nhiều tùy chọn từ danh sách bằng tính năng đa lựa chọn

Chúng tôi cũng có thể thêm một thông báo sẽ được hiển thị khi mục nhập của người dùng không khớp với các tùy chọn có sẵn bằng cách sử dụng thuộc tính

.App{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.input-cont{
  width: 700px;
}
button{
  padding: 8px 15px;
  border: none;
  color: #fff;
  background-color: rgb[79, 79, 237];
  border-radius: 8px;
  margin-top: 5px;
}

7

import './App.css';
import Select from 'react-select';
const selectableOptions = [
  { value: 'Adam', label: 'Adam Geoffrey' },
  { value: 'Jane', label: 'Jane Hibbard' },
  { value: 'Anabelle', label: 'Anabelle Einstein' },
  { value: 'Zeus', label: 'Zeus McQueen' }
]
function App[] {
  return [
    
      
    
  ];
}
export default App;

6

Để cho phép người dùng tạo mục nhập mới thông qua trường nhập liệu, hãy thêm phần sau

import './App.css';
import Select from 'react-select';
const selectableOptions = [
  { value: 'Adam', label: 'Adam Geoffrey' },
  { value: 'Jane', label: 'Jane Hibbard' },
  { value: 'Anabelle', label: 'Anabelle Einstein' },
  { value: 'Zeus', label: 'Zeus McQueen' }
]
function App[] {
  return [
    
      
    
  ];
}
export default App;

7

Ở vị trí của

.App{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.input-cont{
  width: 700px;
}
button{
  padding: 8px 15px;
  border: none;
  color: #fff;
  background-color: rgb[79, 79, 237];
  border-radius: 8px;
  margin-top: 5px;
}

6, chúng tôi sử dụng

.App{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.input-cont{
  width: 700px;
}
button{
  padding: 8px 15px;
  border: none;
  color: #fff;
  background-color: rgb[79, 79, 237];
  border-radius: 8px;
  margin-top: 5px;
}

9 để thay thế

import './App.css';
import Select from 'react-select';
const selectableOptions = [
  { value: 'Adam', label: 'Adam Geoffrey' },
  { value: 'Jane', label: 'Jane Hibbard' },
  { value: 'Anabelle', label: 'Anabelle Einstein' },
  { value: 'Zeus', label: 'Zeus McQueen' }
]
function App[] {
  return [
    
      
    
  ];
}
export default App;

0

Bây giờ, có một tùy chọn để thêm các tên không tồn tại vào các tùy chọn

Ngoài ra, đối với các chuỗi dài hơn, chẳng hạn như tên của các quốc gia, chúng tôi có thể sử dụng biểu mẫu rút gọn trong thuộc tính

import './App.css';
import Select from 'react-select';
const selectableOptions = [
  { value: 'Adam', label: 'Adam Geoffrey' },
  { value: 'Jane', label: 'Jane Hibbard' },
  { value: 'Anabelle', label: 'Anabelle Einstein' },
  { value: 'Zeus', label: 'Zeus McQueen' }
]
function App[] {
  return [
    
      
    
  ];
}
export default App;

40 trong khi hiển thị tên đầy đủ của quốc gia với thuộc tính nhãn

import './App.css';
import Select from 'react-select';
const selectableOptions = [
  { value: 'Adam', label: 'Adam Geoffrey' },
  { value: 'Jane', label: 'Jane Hibbard' },
  { value: 'Anabelle', label: 'Anabelle Einstein' },
  { value: 'Zeus', label: 'Zeus McQueen' }
]
function App[] {
  return [
    
      
    
  ];
}
export default App;

2

Sau đó, chúng tôi chuyển phần này cho thành phần

.App{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.input-cont{
  width: 700px;
}
button{
  padding: 8px 15px;
  border: none;
  color: #fff;
  background-color: rgb[79, 79, 237];
  border-radius: 8px;
  margin-top: 5px;
}

9 thay thế

import './App.css';
import Select from 'react-select';
const selectableOptions = [
  { value: 'Adam', label: 'Adam Geoffrey' },
  { value: 'Jane', label: 'Jane Hibbard' },
  { value: 'Anabelle', label: 'Anabelle Einstein' },
  { value: 'Zeus', label: 'Zeus McQueen' }
]
function App[] {
  return [
    
      
    
  ];
}
export default App;

4

Trên trình duyệt ta sẽ được kết quả như sau

Ở đây, giá trị vẫn là chữ viết tắt ba chữ cái, giúp sử dụng dễ dàng hơn ở phía máy chủ trong khi vẫn giúp người dùng dễ dàng biết họ chọn quốc gia nào bằng cách hiển thị tên đầy đủ trong thuộc tính

import './App.css';
import Select from 'react-select';
const selectableOptions = [
  { value: 'Adam', label: 'Adam Geoffrey' },
  { value: 'Jane', label: 'Jane Hibbard' },
  { value: 'Anabelle', label: 'Anabelle Einstein' },
  { value: 'Zeus', label: 'Zeus McQueen' }
]
function App[] {
  return [
    
      
    
  ];
}
export default App;

42

Phát lại phiên mã nguồn mở

OpenReplay là bộ phát lại phiên mã nguồn mở cho phép bạn xem những gì người dùng làm trên ứng dụng web của bạn, giúp bạn khắc phục sự cố nhanh hơn. OpenReplay tự lưu trữ để kiểm soát hoàn toàn dữ liệu của bạn

Bắt đầu tận hưởng trải nghiệm sửa lỗi của bạn - bắt đầu sử dụng OpenReplay miễn phí

Tìm nạp dữ liệu không đồng bộ

Giả sử chúng ta chọn dữ liệu từ danh sách các mục đang được điền bởi một nguồn dữ liệu. Nguồn dữ liệu này có thể là cơ sở dữ liệu, CMS hoặc API. Dưới đây là một ví dụ về cách chúng tôi có thể đạt được điều này bằng API

import './App.css';
import Select from 'react-select';
const selectableOptions = [
  { value: 'Adam', label: 'Adam Geoffrey' },
  { value: 'Jane', label: 'Jane Hibbard' },
  { value: 'Anabelle', label: 'Anabelle Einstein' },
  { value: 'Zeus', label: 'Zeus McQueen' }
]
function App[] {
  return [
    
      
    
  ];
}
export default App;

6

Trong đoạn mã trên, chúng tôi đang tìm nạp năm tên người dùng tương tự như “John” từ danh sách người dùng trên GitHub. Sau đó, chúng tôi đã lưu trữ dữ liệu này ở trạng thái và chúng tôi có thể thêm dữ liệu này dưới dạng tùy chọn trong thành phần

.App{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.input-cont{
  width: 700px;
}
button{
  padding: 8px 15px;
  border: none;
  color: #fff;
  background-color: rgb[79, 79, 237];
  border-radius: 8px;
  margin-top: 5px;
}

6

import './App.css';
import Select from 'react-select';
const selectableOptions = [
  { value: 'Adam', label: 'Adam Geoffrey' },
  { value: 'Jane', label: 'Jane Hibbard' },
  { value: 'Anabelle', label: 'Anabelle Einstein' },
  { value: 'Zeus', label: 'Zeus McQueen' }
]
function App[] {
  return [
    
      
    
  ];
}
export default App;

0

Thay vì hiển thị một danh sách dài vô tận các tên, chúng tôi sẽ thêm một nút vào

import './App.css';
import Select from 'react-select';
const selectableOptions = [
  { value: 'Adam', label: 'Adam Geoffrey' },
  { value: 'Jane', label: 'Jane Hibbard' },
  { value: 'Anabelle', label: 'Anabelle Einstein' },
  { value: 'Zeus', label: 'Zeus McQueen' }
]
function App[] {
  return [
    
      
    
  ];
}
export default App;

44. Khi nhấp vào nút này, yêu cầu tìm nạp sẽ chạy và một nhóm tên khác sẽ được thêm vào danh sách tùy chọn

import './App.css';
import Select from 'react-select';
const selectableOptions = [
  { value: 'Adam', label: 'Adam Geoffrey' },
  { value: 'Jane', label: 'Jane Hibbard' },
  { value: 'Anabelle', label: 'Anabelle Einstein' },
  { value: 'Zeus', label: 'Zeus McQueen' }
]
function App[] {
  return [
    
      
    
  ];
}
export default App;

1

Ở đây, chúng tôi có một chức năng để thêm các tùy chọn mới. Chúng tôi cũng đã xác định một nút mà chúng tôi sẽ thêm làm thành phần vào

import './App.css';
import Select from 'react-select';
const selectableOptions = [
  { value: 'Adam', label: 'Adam Geoffrey' },
  { value: 'Jane', label: 'Jane Hibbard' },
  { value: 'Anabelle', label: 'Anabelle Einstein' },
  { value: 'Zeus', label: 'Zeus McQueen' }
]
function App[] {
  return [
    
      
    
  ];
}
export default App;

45

import './App.css';
import Select from 'react-select';
const selectableOptions = [
  { value: 'Adam', label: 'Adam Geoffrey' },
  { value: 'Jane', label: 'Jane Hibbard' },
  { value: 'Anabelle', label: 'Anabelle Einstein' },
  { value: 'Zeus', label: 'Zeus McQueen' }
]
function App[] {
  return [
    
      
    
  ];
}
export default App;

2

Với nút tùy chỉnh này được thêm vào, chúng tôi có một nút

import './App.css';
import Select from 'react-select';
const selectableOptions = [
  { value: 'Adam', label: 'Adam Geoffrey' },
  { value: 'Jane', label: 'Jane Hibbard' },
  { value: 'Anabelle', label: 'Anabelle Einstein' },
  { value: 'Zeus', label: 'Zeus McQueen' }
]
function App[] {
  return [
    
      
    
  ];
}
export default App;

46 ở cuối danh sách tùy chọn của chúng tôi, như trong hình bên dưới

Vì chúng ta đã có hàm

import './App.css';
import Select from 'react-select';
const selectableOptions = [
  { value: 'Adam', label: 'Adam Geoffrey' },
  { value: 'Jane', label: 'Jane Hibbard' },
  { value: 'Anabelle', label: 'Anabelle Einstein' },
  { value: 'Zeus', label: 'Zeus McQueen' }
]
function App[] {
  return [
    
      
    
  ];
}
export default App;

47 trong hook

import './App.css';
import Select from 'react-select';
const selectableOptions = [
  { value: 'Adam', label: 'Adam Geoffrey' },
  { value: 'Jane', label: 'Jane Hibbard' },
  { value: 'Anabelle', label: 'Anabelle Einstein' },
  { value: 'Zeus', label: 'Zeus McQueen' }
]
function App[] {
  return [
    
      
    
  ];
}
export default App;

48 nên chúng ta cần thêm một hàm gọi lại để chạy lại yêu cầu tìm nạp và tìm nạp bộ tên tiếp theo. Chúng tôi sẽ sử dụng sửa đổi

import './App.css';
import Select from 'react-select';
const selectableOptions = [
  { value: 'Adam', label: 'Adam Geoffrey' },
  { value: 'Jane', label: 'Jane Hibbard' },
  { value: 'Anabelle', label: 'Anabelle Einstein' },
  { value: 'Zeus', label: 'Zeus McQueen' }
]
function App[] {
  return [
    
      
    
  ];
}
export default App;

49 để lấy thuộc tính trang để đạt được điều này

import './App.css';
import Select from 'react-select';
const selectableOptions = [
  { value: 'Adam', label: 'Adam Geoffrey' },
  { value: 'Jane', label: 'Jane Hibbard' },
  { value: 'Anabelle', label: 'Anabelle Einstein' },
  { value: 'Zeus', label: 'Zeus McQueen' }
]
function App[] {
  return [
    
      
    
  ];
}
export default App;

3

Sau đó, chúng tôi tăng giá trị của trạng thái

import './App.css';
import Select from 'react-select';
const selectableOptions = [
  { value: 'Adam', label: 'Adam Geoffrey' },
  { value: 'Jane', label: 'Jane Hibbard' },
  { value: 'Anabelle', label: 'Anabelle Einstein' },
  { value: 'Zeus', label: 'Zeus McQueen' }
]
function App[] {
  return [
    
      
    
  ];
}
export default App;

60 bằng nút sử dụng hàm

import './App.css';
import Select from 'react-select';
const selectableOptions = [
  { value: 'Adam', label: 'Adam Geoffrey' },
  { value: 'Jane', label: 'Jane Hibbard' },
  { value: 'Anabelle', label: 'Anabelle Einstein' },
  { value: 'Zeus', label: 'Zeus McQueen' }
]
function App[] {
  return [
    
      
    
  ];
}
export default App;

61

import './App.css';
import Select from 'react-select';
const selectableOptions = [
  { value: 'Adam', label: 'Adam Geoffrey' },
  { value: 'Jane', label: 'Jane Hibbard' },
  { value: 'Anabelle', label: 'Anabelle Einstein' },
  { value: 'Zeus', label: 'Zeus McQueen' }
]
function App[] {
  return [
    
      
    
  ];
}
export default App;

4

Cuối cùng, đối với khối

import './App.css';
import Select from 'react-select';
const selectableOptions = [
  { value: 'Adam', label: 'Adam Geoffrey' },
  { value: 'Jane', label: 'Jane Hibbard' },
  { value: 'Anabelle', label: 'Anabelle Einstein' },
  { value: 'Zeus', label: 'Zeus McQueen' }
]
function App[] {
  return [
    
      
    
  ];
}
export default App;

48, chúng tôi đặt cuộc gọi lại là

import './App.css';
import Select from 'react-select';
const selectableOptions = [
  { value: 'Adam', label: 'Adam Geoffrey' },
  { value: 'Jane', label: 'Jane Hibbard' },
  { value: 'Anabelle', label: 'Anabelle Einstein' },
  { value: 'Zeus', label: 'Zeus McQueen' }
]
function App[] {
  return [
    
      
    
  ];
}
export default App;

60 để bất cứ khi nào giá trị của

import './App.css';
import Select from 'react-select';
const selectableOptions = [
  { value: 'Adam', label: 'Adam Geoffrey' },
  { value: 'Jane', label: 'Jane Hibbard' },
  { value: 'Anabelle', label: 'Anabelle Einstein' },
  { value: 'Zeus', label: 'Zeus McQueen' }
]
function App[] {
  return [
    
      
    
  ];
}
export default App;

60 thay đổi, thì

import './App.css';
import Select from 'react-select';
const selectableOptions = [
  { value: 'Adam', label: 'Adam Geoffrey' },
  { value: 'Jane', label: 'Jane Hibbard' },
  { value: 'Anabelle', label: 'Anabelle Einstein' },
  { value: 'Zeus', label: 'Zeus McQueen' }
]
function App[] {
  return [
    
      
    
  ];
}
export default App;

48 sẽ hiển thị lại và tìm nạp sẽ được thực hiện

import './App.css';
import Select from 'react-select';
const selectableOptions = [
  { value: 'Adam', label: 'Adam Geoffrey' },
  { value: 'Jane', label: 'Jane Hibbard' },
  { value: 'Anabelle', label: 'Anabelle Einstein' },
  { value: 'Zeus', label: 'Zeus McQueen' }
]
function App[] {
  return [
    
      
    
  ];
}
export default App;

5

Với điều này, khi chúng tôi nhấp vào nút

import './App.css';
import Select from 'react-select';
const selectableOptions = [
  { value: 'Adam', label: 'Adam Geoffrey' },
  { value: 'Jane', label: 'Jane Hibbard' },
  { value: 'Anabelle', label: 'Anabelle Einstein' },
  { value: 'Zeus', label: 'Zeus McQueen' }
]
function App[] {
  return [
    
      
    
  ];
}
export default App;

46, chúng tôi có thêm năm tên người dùng được thêm vào danh sách tùy chọn

Phần kết luận

Trong hướng dẫn này, chúng ta đã học cách thêm thành phần nút tùy chỉnh vào thành phần

import './App.css';
import Select from 'react-select';
const selectableOptions = [
  { value: 'Adam', label: 'Adam Geoffrey' },
  { value: 'Jane', label: 'Jane Hibbard' },
  { value: 'Anabelle', label: 'Anabelle Einstein' },
  { value: 'Zeus', label: 'Zeus McQueen' }
]
function App[] {
  return [
    
      
    
  ];
}
export default App;

8 của mình và thực hiện tìm nạp dữ liệu không đồng bộ. Bạn có thể tiến xa hơn và tạo thành phần tùy chỉnh của riêng mình mà bạn có thể sử dụng với lựa chọn phản ứng

MẸO TỪ NGƯỜI BIÊN TẬP. Nếu bạn chỉ quan tâm đến việc tìm nạp dữ liệu dễ dàng, hãy xem phần Tìm nạp và cập nhật dữ liệu của chúng tôi bằng Truy vấn phản ứng và Tìm nạp so với Axios. Thư viện nào tốt nhất để thực hiện các yêu cầu HTTP?

Làm cách nào để hiển thị giá trị cơ sở dữ liệu trong thẻ chọn?

Bài Viết Liên Quan

Php này nằm trong Laravel

Bạn có thể nhập kép trong python không?

Làm thế nào để bạn in một phần tử có khoảng trắng trong python?

Một con cá lóc bao nhiêu calo?

Làm cách nào để truy cập nhật ký Magento?

Cách đổi họ và tên trong Google Sheets bằng dấu phẩy

Xóa phần tử wordpress tiêu đề

Eclipse in 2023 in India date and Time

Python lấy các phần tử trang

Kiến trúc cơ sở dữ liệu MySQL là gì?

Mã thông báo api python

Cách đọc và vẽ đồ thị excel trong matlab?

Cúp bóng rổ thế giới 2023

Làm cách nào để truy xuất một phần tử từ danh sách trong Python?

Làm thế nào để bạn tạo một mảng âm trong python?

Chuyển đổi chuỗi thành mảng javascript mà không cần tách

Which crypto will rise in 2023

Làm cách nào để kết xuất tất cả cơ sở dữ liệu trong MySQL?

Đường dẫn thư mục plugin wordpress ở đâu?

Tại sao có khoảng trống trong mã Python của tôi?

Toplist mới

#1

Top 4 uống nước chanh sả mật ong có tác dụng gì 2023

6 tháng trước

#2

Top 10 bài tập làm văn số 5 lớp 7 de 4 2023

6 tháng trước

#3

Top 3 vừa chơi đã có tài khoản vương giả chap 1 2023

6 tháng trước

#4

Top 6 anh sẽ on thôi cover phạm nguyên ngọc lyrics 2023

6 tháng trước

#5

Top 7 tài liệu quản lý nhà nước và quản lý ngành giáo dục đào tạo 2023

6 tháng trước

#6

Top 7 hãy ra khỏi người đó đi hợp âm 2023

6 tháng trước

#7

Top 6 giáo án thơ về thăm nhà bác 2023

6 tháng trước

#8

Top 8 giáo án ngữ văn 6 cánh diều 2023

6 tháng trước

#9

Top 9 tinh bột tham gia phản ứng nào 2023

6 tháng trước

Bài mới nhất

Bảng hệ thống tài khoản kế toán mới nhất 2023 năm 2024

Cung bọ cạp còn gọi là cung gì năm 2024

Mũi va mengoc bc2 là mũi gì năm 2024

Viết một đoạn văn ngắn nói về tình mẫu tử năm 2024

Sợ vợ có gì sai sai vợ là ăn đòn năm 2024

Chi phí xăng dầu cho vào tài khoản nào năm 2024

Sốt siêu vi có biểu hiện như thế nào năm 2024

Bài tập về dòng điện trong điện môi năm 2024

Hóa thân thành người lính trong bài thơ đồng chí năm 2024

Toán lớp 5 học kì 2 năm 2023 năm 2024

Chủ Đề

programming Hỏi Đáp Mẹo Hay Toplist Là gì Địa Điểm Hay Học Tốt mẹo hay Công Nghệ Nghĩa của từ Bao nhiêu Khỏe Đẹp đánh giá Top List bao nhieu bao nhiêu hướng dẫn So Sánh Tiếng anh Bài tập So sánh Xây Đựng Sản phẩm tốt Ngôn ngữ Bài Tập Máy tính javascript Ở đâu Thế nào Hướng dẫn Dịch Tại sao Đại học Món Ngon Facebook Khoa Học