Javascript 从APII筛选数据

我在根据API的正常价格筛选数据时遇到问题。所以我犯的错误有点愚蠢。这是错误

数据在
useLayoutEffect中不可编辑。任何帮助都将不胜感激。非常感谢你。这里是沙盒链接

import React，{useState，useffect}来自“React”
从“../utilis/URL”导入URL；
const BookContext=React.createContext（）；
导出默认函数提供程序（{children}）{
const[data，setData]=useState（[]）
const[filters，setFilters]=useState({
常规价格：“全部”，
长度：“”
})
/*正在获取数据*/
const fetchData=async（）=>{
const response=等待获取（URL）；
const result=wait response.json（）；
console.log（结果）
设置数据（结果）；
};
useffect（（）=>{
fetchData（）；
},[])
const updateFilters=e=>{
const type=e.target.type；
const filter=e.target.name；
常量值=e.target.value；
让筛选值；
如果（类型==“复选框”）{
filterValue=e.target.checked；
}else if（类型==“收音机”）{
值==“所有”？（filterValue=值）：（filterValue=parseInt（值））；
}否则{
filterValue=值；
}
setFilters（{…filters，[filter]：filterValue}）；
};
/*筛选价格手册*/
React.useLayoutEffect（（）=>{
让newBooks=[…data].sort（（a，b）=>a.regularPrice-b.regularPrice）；
如果（正常价格！=“全部”）{
newBooks=newBooks.filter（项=>{
如果（正常价格===0）{
返回item.regularPrice 10和&item.regularPrice<20；
}否则{
退货项目。正常价格>20；
}
});
}
}，[过滤器，数据]；
const{regularPrice}=过滤器；
返回(
{儿童}
);
}
导出{BookContext，BookProvider}

import React，{useContext}来自“React”
从“../../context/books”导入{BookContext}
常量过滤器=（）=>{
常量{filters:{regularPrice，updateFilters}}=useContext（BookContext）
返回(
正常价格

全部的
$0 - $10
$10 - $20
超过20美元
)
}
导出默认过滤器

母公司


import React,{useState, useEffect, useContext} from 'react'
import './Home.css'
import Books from './Books'
import {GiHamburgerMenu} from 'react-icons/gi'
import { BookContext } from "../../context/books";
import Filters from './Filters';
import Responsive from './Responsive'
const Home = () => {
   const {data, handleSelectCategory, currentSelectedCategory } 
   =useContext(BookContext)
   const[isCategoryOpen, setIsCategoryOpen]=useState(false)
  
  function closeCategory(){
    setIsCategoryOpen(false)
  }
   return (
        <div className='books__container' >
            <div className='responsive' >
              <GiHamburgerMenu onClick={()=> 
             setIsCategoryOpen(!isCategoryOpen)}/> 
              {isCategoryOpen ? <Responsive />:null}
            </div>  
            <h1 className='categories'>Categories</h1>
            {Object.keys(data).map((key, index)=>{
            let books = data[key];
            return (              
              <div key={key} onClick={() => handleSelectCategory(key)} 
              className='books__list' >
              {books[0].category}     
              </div>                 
              );})}   
              <Filters />
              <Books category={currentSelectedCategory} />
        </div>
    )
}

export default Home



从“React”导入React，{useState，useEffect，useContext}
导入“./Home.css”
从“./Books”导入书籍
从'react icons/gi'导入{GiHamburgerMenu}
从“../../context/books”导入{BookContext}”；
从“./Filters”导入筛选器；
从“/Responsive”导入响应
常量Home=（）=>{
常量{数据，handleSelectCategory，currentSelectedCategory}
=useContext（BookContext）
常量[isCategoryOpen，setIsCategoryOpen]=useState（false）
函数closeCategory（）{
setIsCategoryOpen（假）
}
返回(
setIsCategoryOpen（！isCategoryOpen）}/>
{isCategoryOpen？：null}
类别
{Object.keys（data.map）（（key，index）=>{
让书本=数据[键]；
报税表（
handleSelectCategory（键）}
className='books\uuu list'>
{书籍[0]。类别}
);})}   
)
}
导出默认主页

孩子


从“React”导入React，{useContext，ReactFragment}
从“../../context/cart”导入{CartContext}；
从“./HoverBooks”导入悬停簿；
从“react router dom”导入{useHistory，Link}；
从“../../context/user”导入{UserContext}；
常量书籍=（{category}）=>{
const{addToCart}=useContext（CartContext）
const{user}=React.useContext（UserContext）；
报税表（
{category.slice（0,5）.map（（book）=>{
控制台日志（book）
返回(
{book.bookName}
作者：{book.By}
纳雷特人：{book.Narreted | |
书籍[“由”]编辑]
长度：{book.Length | | book[“Length”]}
发布日期：{book.ReleaseDate}
语言：{book.Language}
评级：{book.Rating}
正常价格：{book.RegularPrice}
{user.authToken(
addToCart（书籍）
}
>添加到购物车
) : (
登录购买书籍
)}
)})}
)
}
导出默认书籍
我通过将
结果
对象转换为
对象。值
并在
设置数据
中使用，成功地消除了错误

  const fetchData = async () => {
    const response = await fetch(URL);
    const result = await response.json();
    const resultArray = Object.values(result);

    setCurrentSelectedCategory(resultArray[0]['category']);
    //    setCurrentSelectedCategory(result[Object.keys(result)[0]]);
    setData(resultArray);
  };


但我不确定这个应用程序过滤器应该如何工作。如果你能展示一幅完整应用程序的图片，我可能会了解更多（例如，如果你按照某种教程来做，你可以指向该资源的URL，等等）

正如我在之前的评论中所说的，您似乎不能直接使用api响应的结果。如果您在浏览器中看到heroku应用程序的端点，则结构清晰

我还建议您避免在与codesandbox示例相同的文件夹中使用相同的文件名，例如（
books.js
和
books.js
），即使操作系统允许两者都存在。
您链接的codebox示例给出了另一个不同的错误，“未定义regularPrice”和“未定义keyEventHandler”@Motoroller mb我忘了保存试试这个我从console.log打印了
数据的内容，它包含一个对象
{Arts and Entertainment:Array（5），传记回忆录：Array（5），商业和职业：Array（5），儿童有声读物：Array（5），计算机和

import React,{useState, useEffect, useContext} from 'react'
import './Home.css'
import Books from './Books'
import {GiHamburgerMenu} from 'react-icons/gi'
import { BookContext } from "../../context/books";
import Filters from './Filters';
import Responsive from './Responsive'
const Home = () => {
   const {data, handleSelectCategory, currentSelectedCategory } 
   =useContext(BookContext)
   const[isCategoryOpen, setIsCategoryOpen]=useState(false)
  
  function closeCategory(){
    setIsCategoryOpen(false)
  }
   return (
        <div className='books__container' >
            <div className='responsive' >
              <GiHamburgerMenu onClick={()=> 
             setIsCategoryOpen(!isCategoryOpen)}/> 
              {isCategoryOpen ? <Responsive />:null}
            </div>  
            <h1 className='categories'>Categories</h1>
            {Object.keys(data).map((key, index)=>{
            let books = data[key];
            return (              
              <div key={key} onClick={() => handleSelectCategory(key)} 
              className='books__list' >
              {books[0].category}     
              </div>                 
              );})}   
              <Filters />
              <Books category={currentSelectedCategory} />
        </div>
    )
}

export default Home



import React,{useContext, ReactFragment} from 'react'
import { CartContext } from '../../context/cart';
import HoverBooks from './HoverBooks';
import { useHistory, Link } from "react-router-dom";
import { UserContext } from '../../context/user';
const Books = ({category}) => {
const {addToCart }= useContext(CartContext)
const { user } = React.useContext(UserContext);

    return (     
        <div className='books__main'>      
        {category.slice(0, 5).map((book) => {   
          console.log(book)    
          return(
           <React.Fragment key={book.id}>
           <HoverBooks 
           key={book.id}
           {...book}       
           />    
           <div className='book__content'>
            <li className='book__name'>{book.bookName}</li>
             <h4 className='book__prop'>By: {book.by}</h4>
             <h4  className='book__prop'>Narreted by: {book.Narreted || 
           book["Narreted by"]}</h4>
             <h4  className='book__prop'>Length: {book.length || book["Length"]} 
            </h4>
             <h4  className='book__prop'>Release Date: {book.ReleaseDate}</h4>
             <h4  className='book__prop'>Language: {book.Language}</h4>
             <h4  className='book__prop'>Rating: {book.rating}</h4>
           </div>           
           <div className='book__adt'> 
           <h4>Regular Price: {book.RegularPrice}</h4>
           {user.authToken ? (
           
           <button onClick={() => 

              addToCart(book)
           }
           >Add to cart</button>  
           ) : (
            <Link to="/login" className="adt__login">
            Login to buy books
           </Link>
        )}
           </div>
       </React.Fragment>
        )})}
      </div>
     
    )
}
export default Books

  const fetchData = async () => {
    const response = await fetch(URL);
    const result = await response.json();
    const resultArray = Object.values(result);

    setCurrentSelectedCategory(resultArray[0]['category']);
    //    setCurrentSelectedCategory(result[Object.keys(result)[0]]);
    setData(resultArray);
  };