在 Api 调用中过滤数据

Question

我在根据 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}
            />
            [=12=] - 
          </label>
          <label>
            <input
              type="radio"
              name="regularPrice"
              value="10"
              checked={regularPrice === 10}
              onChange={updateFilters}
            />
             - 
          </label>
          <label>
            <input
              type="radio"
              name="regularPrice"
              value="20"
              checked={regularPrice === 20}
              onChange={updateFilters}
            />
            Over 
          </label>
       
        </div>
    )
}

export default Filters

Answer 1

如错误所述，regularPrice 未在 BooksProvider 中定义。你不必暴露 regularPrice 因为你可以从 filters 得到它，但如果你真的想要，从 filters.

解构它

const { regularPrice } = filters

return (
  <BookContext.Provider
    value={{
      data,
      filters,
      regularPrice,
      updateFilters,
      handleSelectCategory,
      setCurrentSelectedCategory,
      currentSelectedCategory,
    }}
  >
    {children}
  </BookContext.Provider>
)

在 Api 调用中过滤数据

Filtering data in Api call

javascript

json

filtering

filter

reactjs