Я пытаюсь использовать .find в серверном компоненте.
export async function TransactionList() {
const transactions = await fetch('/transactions');
return (
<ul>
{transactions.map(transaction => {
const category = CATEGORIES.find(
(c) => c.value === transaction.category
);
return (...)
}}
</ul>
)
}
Однако возникает ошибка
Error: Attempted to call find() from the server but find is on the client. It's not possible to invoke a client function from the server, it can only be rendered as a Component or passed to props of a Client Component.
at eval (./components/TransactionsList/index.tsx:43:72)
at Array.map (<anonymous>)
Есть ли обходной путь в этом случае?
🤔 А знаете ли вы, что...
JavaScript - это скриптовый язык программирования, разработанный Netscape Communications Corporation.
Решите ее, выделив компонент в отдельный файл.
export async function TransactionList() {
const transactions = await fetch('/transactions');
return (
<ul>
{transactions.map(transaction =>
<TransactionItem transaction = {transaction}/>
)}
</ul>
)
}
TransactionItem.tsx
export async function TransactionItem({transaction}) {
const category = CATEGORIES.find((c) => c.value === transaction.category);
return (...)
}