在 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