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 而不是數組，以使其與您正在使用的數據結構對齊。