reactjs - התכונה 'filter' לא קיימת על סוג האובייקט

אני עובד עם zustand ו-TypeScript. קיבלתי את השגיאה הזו בקוד שלי

Property 'filter' does not exist on type 'object'.ts(2339)

אני לא יודע איך לתקן את הבעיה הזו. אני יוצר אובייקט מהספרייה useStore שלי. ניסיתי להשתמש ב-'type' אבל זה מעלה את השגיאות האלה בעורך הקוד

TS

import React from "react";
import "./App.css";
import create from "zustand";

type PkState = {
    filter: "",
    pokemon: [],
  }


const useStore = create((PkState) => ({
 

  PkStateFilter: (filter) =>
    PkState((state) => ({
      ...state,
      filter,
    })),

  PkStatePokemon: (pokemon) =>
    PkState((state) => ({
      ...state,
      pokemon,
    })),
}));

//  input
const FilterInput = () => {
  const filter = useStore((state) => state.filter);
  const PkStateFilter = useStore((state) => state.PkStateFilter);
  return (  <input value={filter}  onChange=((evt)=>PkStateFilter(evt.target.value))  />
  )
  


};

function App() {
  return <div className="App"></div>;
}

export default App;

תשובה #1

אתה צריך להגדיר סוג עבור החנות שלך.

import React from "react";
import "./App.css";
import create from "zustand";

type State = {
  filter: string;
  pokemon: Array<string>;
  setFilter: (filter: string) => void;
  setPokemon: (pokemon: Array<string>) => void;
};

// You have to use the type here
const useStore = create<State>((set) => ({
  filter: "", // set initial values here
  pokemon: [],

  setFilter: (filter) =>
    set((state) => ({
      ...state,
      filter
    })),

  setPokemon: (pokemon) =>
    set((state) => ({
      ...state,
      pokemon
    }))
}));

//  input
const FilterInput = () => {
  const filter = useStore((state) => state.filter);
  const setFilter = useStore((state) => state.setFilter);
  return (
    <input value={filter} onChange={(evt) => setFilter(evt.target.value)} />
  );
};

function App() {
  return (
    <div className="App">
    </div>
  );
}

export default App;

תשובה #2

אני לא בטוח שזה יעבוד, נסה עם filter מסיח דעת בדרך הבאה:

 const { filter } = useStore((state) => state);

אתה גם יכול לבדוק דיבוג של useStore עם console.log, כדי לבדוק מה מוחזר:

 const returnedState = useStore((state) => state);

 // Check does `filter` exists in state
 console.warn('returnedState', returnedState);