не могу указать тип данных в $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(['']);
→ Ссылка