object.js 与 state 反应（无法读取未定义的属性“地图”）

Question

我正在使用 js Object 并且在这个 object 中我有 3 部分数据：第一部分（新品）第二部分（畅销书）和第三部分（特价商品），当我使用 array.map() 循环数据时出现此错误发生

我在这里看到了很多像我一样的问题，但没有适合我的解决方案

这是数据

这是代码

import ProductItem from './ProductItem';
import {getAll} from '../../api/product';

class Products extends Component {
   state ={
      products :[]
   };
componentDidMount(){
    getAll().then(data =>{
        this.setState({
            products :data
        })
        
    });
}
render() {
    
    return (
        <div className="container">
            <div className="head-with-border"><h2>New Arrival</h2></div>
            <div className="products">
                {this.state.products.bestSeller.map(product =>
                    <div className={"product"} key={product.id}>
                    <ProductItem product={product}/>
                    </div>
                )}
            
            </div>

        </div>
    )
  }
 }
 export default Products;

这是 consols.log（数据）

这是 getAll function

Answer 1

您的代码中存在竞争条件。 初始渲染发生在您使用 fetch 上传数据之前。

import ProductItem from './ProductItem';
import {getAll} from '../../api/product';

class Products extends Component {
   state ={
      products :[]
   };
componentDidMount(){
    fetchData()
}

const fetchData = async () => {
    let data = await getAll()
    this.setState({
        products :data
    })
}



render() {
    
    return (
    <div className="container">
        <div className="head-with-border"><h2>New Arrival</h2></div>
        <div className="products">
            {(this.state.products.bestSeller 
                ? this.state.products.bestSeller 
                : []
             ).map(product =>
                <div className={"product"} key={product.id}>
                <ProductItem product={product}/>
                </div>
            )}
        
        </div>

    </div>
    )
  }
 }
 export default Products;

Answer 2

您需要检查默认的空 state：

import ProductItem from './ProductItem';
import {getAll} from '../../api/product';

class Products extends Component {
   state ={
      products: {}
   };
componentDidMount(){
    getAll().then(data =>{
        this.setState({
            products :data
        })
        
    });
}
render() {
    const { bestSeller } = this.state.products;
    
    return (
        <div className="container">
            <div className="head-with-border"><h2>New Arrival</h2></div>
            <div className="products">
                {bestSeller && bestSeller.map(product =>
                    <div className={"product"} key={product.id}>
                    <ProductItem product={product}/>
                    </div>
                )}
            
            </div>

        </div>
    )
  }
 }
 export default Products;

我还将您的默认产品 state 更改为空的 object 而不是数组，以使其与您正在使用的数据结构对齐。