javascript - 在 API 调用中过滤数据
问题描述
我在根据常规价格从 API 过滤数据时遇到问题。所以我遇到的错误有点愚蠢。这是 'regular price is not defined no-undef
错误显示在我将值传递给 ContextPrivider 的行上。我可能是个盲人。我真的很感激一些帮助。非常感谢你。
书籍背景
import React, {useState, useEffect} from 'react'
import URL from '../utilis/URL';
const BookContext = React.createContext();
export default function BooksProvider({ children }) {
const [data, setData] = useState([])
const [filters, setFilters]= useState({
regularPrice:"",
length:""
})
/*fetching data */
const fetchData = async () => {
const response = await fetch(URL);
const result = await response.json();
console.log(result)
setData(result);
};
useEffect(()=>{
fetchData();
},[])
const updateFilters = e => {
const type = e.target.type;
const filter = e.target.name;
const value = e.target.value;
let filterValue;
if (type === "checkbox") {
filterValue = e.target.checked;
} else if (type === "radio") {
value === "all" ? (filterValue = value) : (filterValue = parseInt(value));
} else {
filterValue = value;
}
setFilters({ ...filters, [filter]: filterValue });
};
/* filtering price books */
React.useLayoutEffect(() => {
let newBooks = [...data].sort((a, b) => a.regularPrice - b.regularPrice);
const { regularPrice } = filters;
if (regularPrice !== "all") {
newBooks = newBooks.filter(item => {
if (regularPrice === 0) {
return item.regularPrice <10;
} else if (regularPrice === 10) {
return item.regularPrice > 10 && item.regularPrice < 20;
} else {
return item.regularPrice > 20;
}
});
}
}, [filters, data]);
return (
<BookContext.Provider value={{ data, filters, regularPrice, updateFilters, handleSelectCategory, setCurrentSelectedCategory, currentSelectedCategory }}>
{children}
</BookContext.Provider>
);
}
export {BookContext, BooksProvider}
过滤器
import React, { useContext } from 'react'
import { BookContext } from '../../context/books'
const Filters = () => {
const {filters:{regularPrice, updateFilters}}= useContext(BookContext)
return (
<div>
<p>Regular Price</p>
<label>
<input
type="radio"
name="regularPrice"
id="all"
value="all"
checked={regularPrice === "all"}
onChange={updateFilters}
/>
all
</label>
<label>
<input
type="radio"
name="regularPrice"
value="0"
checked={regularPrice === 0}
onChange={updateFilters}
/>
$0 - $10
</label>
<label>
<input
type="radio"
name="regularPrice"
value="10"
checked={regularPrice === 10}
onChange={updateFilters}
/>
$10 - $20
</label>
<label>
<input
type="radio"
name="regularPrice"
value="20"
checked={regularPrice === 20}
onChange={updateFilters}
/>
Over $20
</label>
</div>
)
}
export default Filters
解决方案
正如错误所说,regularPrice
未在BooksProvider
. 您不必公开regularPrice
,因为您可以从中获取它,filters
但如果您真的想要,请从filters
.
const { regularPrice } = filters
return (
<BookContext.Provider
value={{
data,
filters,
regularPrice,
updateFilters,
handleSelectCategory,
setCurrentSelectedCategory,
currentSelectedCategory,
}}
>
{children}
</BookContext.Provider>
)
推荐阅读
- excel - VBA / Excel - 填写公式直到列中的最后一行并选择一个文件
- html - 文本对齐:无序列表的中心在屏幕最小化时看起来关闭
- mysql - 如何使用 group by 和 Order by DESC 获取表中的最后一行?
- google-bigquery - Bigquery 中的 WRITE_TRUNCATE
- python - 基于多个范围从数组中检索间隔
- nuxt.js - 如何为多个嵌套调用添加异步等待
- c++ - 复制构造函数需要没有参数的基本构造函数
- r - R 包“食谱”中的 prep/bake/juice 有什么区别?
- c# - 有没有办法从 YYYYMM 组合中获得最大值?
- mongodb - NEXTJS,MONGODB - updateOne 不起作用?