英文:
Type 'UserContextType' is not an array type
问题
Here is the translated content:
我在React中遇到了一些上下文问题。我试图将一个对象设置为状态。在本地工作正常，但当我尝试构建项目时，出现错误，提示：类型 'UserContextType' 不是数组类型。
我不知道为什么会出现这个错误，因为我没有在任何地方尝试将它用作数组。
这是上下文文件：
import React, {
useState,
Dispatch,
SetStateAction,
createContext,
} from "react";
type Props = {
children: JSX.Element;
};
type Filters = {
type: string[];
rating: number[];
facilities: string[];
stars: number[];
minPrice: number;
maxPrice: number;
};
type UserContextType = {
filters: Filters;
setFilters: Dispatch<SetStateAction<Filters>>;
};
const initialUserContextState = {
filters: {
type: [],
stars: [],
rating: [],
facilities: [],
minPrice: 0,
maxPrice: 0,
},
setFilters: () => {},
};
export const FilterContext = createContext<UserContextType>(initialUserContextState);
export function FilterComponent({ children }: Props) {
const [filters, setFilters] = useState<Filters>({
type: [],
stars: [],
rating: [],
facilities: [],
minPrice: 0,
maxPrice: 0,
});
return (
<FilterContext.Provider value={{ filters, setFilters }}>
{children}
</FilterContext.Provider>
);
}
export default FilterComponent;
这是我的过滤器组件中使用此状态片段的函数：
function Filter({}: Props) {
const [filters, setFilters] = useContext(FilterContext);
const [filteredItems, setFilteredItems] = useState([]);
const [smallestPrice, setSmallestPrice] = useState<number>();
const [highestPrice, setHighestPrice] = useState<number>();
const listFunction = (e: React.FormEvent<HTMLUListElement>) => {
const listItem = e.target as Element;
const parentList = listItem.closest(".filter-list__item");
const filterList = Array.from(
parentList.querySelectorAll("li.filter__item")
);
const newArray = filterList
.filter((item) => item.querySelector("input:checked"))
.map((item) => item.querySelector("input").id);
if (parentList.classList.contains("js-type")) {
setFilters((prevState) => ({ ...prevState, type: newArray }));
}
if (parentList.classList.contains("js-rating")) {
setFilters((prevState) => ({ ...prevState, rating: newArray }));
}
if (parentList.classList.contains("js-facilities")) {
setFilters((prevState) => ({ ...prevState, facilities: newArray }));
}
if (parentList.classList.contains("js-stars")) {
setFilters((prevState) => ({ ...prevState, stars: newArray }));
}
};
const openFunction = (e: React.MouseEvent<HTMLButtonElement>) => {
const target = e.target as Element;
const filterTitle = target.parentNode;
const filter = filterTitle.parentNode;
filter.classList.toggle("is-open");
};
}
非常感谢！
英文:
i'm having some problems with context in React. I'm trying to set an object as state. It works locally but when i try to build the project i get an error saying: Type 'UserContextType' is not an array type.
I don't know why i'm getting this error since i'm not trying to use it as an array anywhere.
Here is the context file:
import React, {
useState,
Dispatch,
SetStateAction,
createContext,
} from "react";
type Props = {
children: JSX.Element;
};
type Filters = {
type: string[];
rating: number[];
facilities: string[];
stars: number[];
minPrice: number;
maxPrice: number;
};
type UserContextType = {
filters: Filters;
setFilters: Dispatch<SetStateAction<Filters>>;
};
const iUserContextState = {
filters: {
type: [],
stars: [],
rating: [],
facilities: [],
minPrice: 0,
maxPrice: 0,
},
setFilters: () => {},
};
export const FilterContext = createContext<UserContextType>(iUserContextState);
export function FilterComponent({ children }: Props) {
const [filters, setFilters] = useState<Filters>({
type: [],
stars: [],
rating: [],
facilities: [],
minPrice: 0,
maxPrice: 0,
});
return (
<FilterContext.Provider value={{ filters, setFilters }}>
{children}
</FilterContext.Provider>
);
}
export default FilterComponent;
This is the function in my filter component where i use this piece of state
function Filter({}: Props) {
const [filters, setFilters] = useContext(FilterContext);
const [filteredItems, setFilteredItems] = useState([]);
const [smallestPrice, setSmallestPrice] = useState<number>();
const [highestPrice, setHighestPrice] = useState<number>();
const listFunction = (e: React.FormEvent<HTMLUListElement>) => {
const listItem = e.target as Element;
const parentList = listItem.closest(".filter-list__item");
const filterList = Array.from(
parentList.querySelectorAll("li.filter__item")
);
const newArray = filterList
.filter((item) => item.querySelector("input:checked"))
.map((item) => item.querySelector("input").id);
if (parentList.classList.contains("js-type")) {
setFilters((prevState) => ({ ...prevState, type: newArray }));
}
if (parentList.classList.contains("js-rating")) {
setFilters((prevState) => ({ ...prevState, rating: newArray }));
}
if (parentList.classList.contains("js-facilities")) {
setFilters((prevState) => ({ ...prevState, facilities: newArray }));
}
if (parentList.classList.contains("js-stars")) {
setFilters((prevState) => ({ ...prevState, stars: newArray }));
}
};
const openFunction = (e: React.MouseEvent<HTMLButtonElement>) => {
const target = e.target as Element;
const filterTitle = target.parentNode;
const filter = filterTitle.parentNode;
filter.classList.toggle("is-open");
};
Thank you very much!
答案1
得分: 0
- const [filters, setFilters] = useContext(FilterContext);
+ const {filters, setFilters} = useContext(FilterContext);
英文:
change :
const [filters, setFilters] = useContext(FilterContext);
to :
const {filters, setFilters} = useContext(FilterContext);
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论