需要将对象键名称替换为另一个名称并使用 React 传递到下拉列表

Question

我想将对象键名“Value”替换为“label”并传递给 DropdownList.. 例如，我在下拉组件中使用“item.value”，但现在我需要获取输入数据并将“item.value”替换为“item.label”... 那么如何更改该对象键名称并在 DropDown 中呈现列表任何人都可以帮忙吗，在此先感谢

export const inputs = {
    "purpose": [
         {
            "locale": "er",
             "code": "zzz",
             "value": "Payment"
         },
         {
            "locale": "po",
             "code": "dgf",
             "value": "Support"
         },
         {
            "locale": "fg",
             "code": "oiuy",
             "value": "yes Worked"
         },

这是下拉列表

const Dropdown = () => {
    const data = inputs;
    //console.log(data.purpose);
    return (
                <select >
                    <option>Select an Option</option>
                    {data.purpose.map((items)=>(
                           //console.log(items.value);
                           <option>{items.value}</option>
                    ))}
                </select>
            </div>
        </div>
    )
}

export default Dropdown

Answer 1

您可以通过映射来使用新键复制数组：

const transformed = inputs.purpose.map(({ locale, code , value }) => ({ label: value, locale: locale, code : code}));

Answer 2

简单的方法：

const new=inputs.purpose.map(i=>{
    const temp={};
    temp.locale=i.locale;
    temp.code=i.code;
    temp.label=i.value;
    return temp;
    })

需要将对象键名称替换为另一个名称并使用 React 传递到下拉列表

Need to Replace the Object key name to another name and Pass down to dropdown list using React

javascript

reactjs

react-hooks