не могу указать тип данных в $search
store-data.ts
import {
atom
} from "nanostores"
export const $search = atom([]);
export const $isOpen = atom(false);
помогите пожалуйста, не могу определить тип данных $search.set()
передаю данные через nanoStore
полностью проект на remult react nanostore next и т.д
пишет вот такую ошибку
Argument of type 'string' is not assignable to parameter of type 'never[]'.ts(2345)
в таких местах
{
$search.set(textInValue || '');
$search.set(selectedItem.title);
$search.set(search);
$search.set('');
}
полностью код
"use client";
import {
useEffect,
useMemo,
useState
} from "react";
import classes from "./Search.module.css";
import {
BtnInSearch
} from "../Buttons/Buttons"
import {
$search,
$isOpen
} from "../../../store/store-data";
import {
Product
} from "../../../shared/entities/Product";
import {
repo,
} from "remult";
const productRepo = repo(Product);
export function SearchForm() {
const [data, setData] = useState < Product[] > ([]);
useEffect(() => {
productRepo.find({}).then(setData)
}, [])
const [sort, setSort] = useState(null),
[search, setSearch] = useState < string > (''),
[isOpen, setIsOpen] = useState < boolean > (true),
[selectedIndex, setSelectedIndex] = useState < number > (-1),
sortAndFilterData: Product[] = useMemo(() => {
return data.filter(row => {
if (!search.length) return true;
for (const key in row) {
const keyRow = row[key as keyof Product]
console.log({
key,
row
}, keyRow)
if (String(keyRow).toLowerCase()?.includes?.(search.toLowerCase())) return true;
}
console.log(search)
return false;
});
}, [data, sort, search]),
itemClick = (event: React.MouseEvent < HTMLElement > ) => {
const textInValue: string | null = event.currentTarget.textContent;
setSearch(textInValue || '');
$search.set(textInValue || '');
setIsOpen(!isOpen);
},
eventSearch = (event: React.KeyboardEvent < HTMLInputElement > ) => {
if (event.key === 'Enter') {
event.preventDefault();
if (selectedIndex >= 0 && selectedIndex < sortAndFilterData.length) {
const selectedItem = sortAndFilterData[selectedIndex];
if (selectedItem) {
setSearch(selectedItem.title);
$search.set(selectedItem.title);
}
} else {
$search.set(search);
}
setIsOpen(!isOpen);
setSelectedIndex(-1);
}
if (event.key === 'Backspace') {
setIsOpen(true);
}
if (event.key === 'ArrowDown') {
event.preventDefault();
setSelectedIndex(prevIndex => Math.min(prevIndex + 1, sortAndFilterData.length - 1));
}
if (event.key === 'ArrowUp') {
event.preventDefault();
setSelectedIndex(prevIndex => Math.max(prevIndex - 1, 0));
}
},
btnSearch = (event: React.MouseEvent < HTMLButtonElement > ) => {
event.preventDefault();
$search.set(search);
setIsOpen(false);
setSelectedIndex(-1);
},
clearForm = () => {
$search.set('');
setSearch('');
setSelectedIndex(-1);
},
inputClick = () => {
$isOpen.set(false);
setIsOpen(true);
setSelectedIndex(-1);
};
console.log('SearchForm', data);
return < >
<
form className = {
classes.search__form
} >
<
input
className = {
classes.search__input
}
value = {
search
}
onInput = {
(event: React.ChangeEvent < HTMLInputElement > ) => setSearch(event.target.value)
}
onClick = {
inputClick
}
onKeyDown = {
eventSearch
}
/>
<
ul className = {
classes.autocomplete
} > {
search && isOpen ?
sortAndFilterData
.filter(row => {
if (!search.length) return true;
for (const key in row) {
const keyRow = row[key as keyof Product]
console.log({
key,
row
}, keyRow)
if (String(keyRow).toLowerCase()?.includes?.(search.toLowerCase())) return true;
}
console.log(search)
return false;
})
.map((row, index) => {
return < li
onClick = {
itemClick
}
key = {
row.title
}
className = {
`${classes.autocomplete__item} ${selectedIndex === index ? classes.selected : ''}`
} >
{
row.title
} < /li>
}) :
null
} <
/ul> {
search.length > 0 ? ( <
BtnInSearch btnSearch = {
btnSearch
}
clearForm = {
clearForm
}
/>
) : null
} <
/form> <
/>
}
Ответы (1 шт):
Автор решения: Назим Фаталиев
→ Ссылка
Решил вопрос.
Итог такой, что мы определяем тип переменной:
export const $search = atom([]);
и меняем его на:
export const $search= atom<string[]>([]);
После чего меняем эти строки:
$search.set(textInValue || '');
$search.set(selectedItem.title);
$search.set(search);
$search.set('');
на:
$search.set([textInValue || '']);
$search.set([selectedItem.title]);
$search.set([search]);
$search.set(['']);