[react]reactを使用してkao図書検索サイトを作成します:2.カート機能の実装
カートのステータスの管理
カートを追加するaddToOrder()関数
useCallbackを使用して
addToOrder()
関数を作成し、カートに本を追加します.どの本をショッピングバスケットに入れてisbnパラメータを通じて入れます.
パラメータはKaKao図書検索APIで表示できます.
同じ本を追加する場合は、finedで本がショッピングバスケットにあるかどうかをチェックして、2冊または3冊に変更してください.同じ本がある場合は、数量(巻数)に1を加え、ない場合は数量に1を加えてください.
const [orders, setOrders] = useState([]);
// 장바구니 추가
// [{isbn, quantity : 1}]
const addToOrder = useCallback((isbn) => {
setOrders((orders) => {
// 동일한 책을 추가할 땐 2권, 3권 으로 변경해주기 위해 동일한 isbn가 있는지 검사
const finded = orders.find((order) => order.isbn === isbn);
// 장바구니에 동일한 책이 없으면 quantity에 1을 넣어줌
if (finded === undefined) {
return [...orders, { isbn, quantity: 1 }];
} // 동일한 책이 있으면
else {
return orders.map((order) => {
if (order.isbn === isbn) {
return {
isbn,
quantity: order.quantity + 1,
};
} else {
return order;
}
});
}
});
}, []);
受注解除用remove()関数
useCallback
で注文をキャンセルすることもできます.// 장바구니에서 책 삭제하기
const remove = useCallback((isbn) => {
setOrders((orders) => {
return orders.filter((order) => order.isbn !== isbn);
});
}, []);
removeAll()関数は、受注全体をキャンセルします。
注文全体をキャンセルする
removeAll()
関数は、useCallback
を介して空の配列に置き換えられます.// 장바구니에서 전체 책 삭제하기
const removeAll = useCallback(() => {
setOrders([]);
}, []);
AppStateProviderコンポーネントをグローバルに管理
上に作成した関数をvalueに入れます.
return (
<AppStateContext.Provider
value={{
books,
searchBook,
orders,
addToOrder,
remove,
removeAll,
}}>
{children}
</AppStateContext.Provider>
);
AppStateProviderコンポーネントをアプリケーションの親コンポーネントにカプセル化し、valueをグローバルに管理します.function App() {
return (
<>
<AppStateProvider>
<BrowserRouter>
<Switch>
<Route component={MainPage} exact path='/' />
<Route compoennt={LibraryPage} path='/library' />
</Switch>
</BrowserRouter>
</AppStateProvider>
</>
);
}
フックの作成
АААААBooks HookАА
import { useContext } from 'react';
import AppStateContext from '../contexts/AppStateContext';
// books 데이터를 받아서 내주는 역할을 하는 Hook
export default function useBooks() {
const { books, searchBook } = useContext(AppStateContext);
return { books, searchBook };
}
✔addToOrder()、remove()およびremoveAll()ステータスは、送信するユーザーBook Hookとして
import { useContext } from 'react';
import AppStateContext from '../contexts/AppStateContext';
// 상태를 받아서 보내주는 역할을 하는 useBooks Hook
export default function useActions() {
const { addToOrder, remove, removeAll } = useContext(AppStateContext);
return { addToOrder, remove, removeAll };
}
✔orders Hookデータを受信して提供するuserOrders
import { useContext } from 'react';
import AppStateContext from '../contexts/AppStateContext';
// orders 데이터를 받아서 내주는 역할을 하는 Hook
export default function useOrders() {
const { orders } = useContext(AppStateContext);
return orders;
}
Reference
この問題について([react]reactを使用してkao図書検索サイトを作成します:2.カート機能の実装), 我々は、より多くの情報をここで見つけました https://velog.io/@97godo/React-React-로-kakao-책-검색-사이트-만들기-2.-장바구니-기능-구현テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol