在 React 中动态选择一个 json 键值对答案

【问题标题】：Selecting a json key-value pair dynamically in React在 React 中动态选择一个 json 键值对
【发布时间】：2018-09-02 15:34:22
【问题描述】：

我有一个这样的 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

能做到还是思路完全错了？

提前谢谢你！

编辑：如有必要，我可以将日期键格式更改为任何格式。

【问题讨论】：

日期 API 有不同的格式。您可能需要输入您的空闲时间

标签： javascript json reactjs

【解决方案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

【讨论】：