Блог

У меня возникла проблема с фильтрацией данных из 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 amp;amp; 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>
)