在React中動態選擇一個JSON鍵值對

Question

我有一個像這樣的json：

{
    "index": 1,
    "ln": "27953",
    "name": "Product 1",
    "availability": {
        "day0726": "G",
        "day0727": "G",
        "day0728": "G",
    }
}

我想根據日期來動態顯示可用性。 例如，“ day0726”是7月26日。 如何使用以下代碼段顯示正確日期的值：

import React from "react"
import Product from "./Product"

const Productlist = ({ prodlist }) => {
    return (
        <div>
            {
                prodlist.map((item, i) => {
                    return (
                        <Product
                            key={prodlist[i].index}
                            name={prodlist[i].name}
                            ln={prodlist[i].ln}
                            availability={*this is I want to change dynamically*}
                        />
                    )
                })
            }
        </div>
    )
}

export default Productlist 

可以做到還是思路完全錯誤？

先感謝您！

編輯：如有必要，我可以將日期鍵格式更改為任何格式。

Answer 1

您首先必須創建一個具有自己格式的日期，然后可以在組件中使用該日期以某個特定的鍵獲取產品availability ：

 let date = new Date(); function str_pad(n) { return String("00" + n).slice(-2); } date = "day"+(str_pad(date.getMonth()+1))+str_pad(date.getDate()); console.log(date) 

import React from "react"
import Product from "./Product"

let date = new Date();
function str_pad(n) {
  return String("00" + n).slice(-2);
}
date = "day"+(str_pad(date.getMonth()+1))+str_pad(date.getDate());


const Productlist = ({ prodlist }) => {
    return (
        <div>
            {
                prodlist.map((item, i) => {
                    return (
                        <Product
                            key={prodlist[i].index}
                            name={prodlist[i].name}
                            ln={prodlist[i].ln}
                            availability={prodlist[i].availability[date]}
                        />
                    )
                })
            }
        </div>
    )
}

export default Productlist