在另一个对象数组中转换对象数组?

时间:2020-03-21 20:47:52

标签: javascript arrays reactjs object

我一直在寻找类似的问题,但我发现的问题都没有真正解决我的问题...

编辑: 整个想法是开发一个可重用的下拉组件,在其中我可以直接通过道具传递物品。这些项目必须是带有键(用于字段值)和显示属性(用于值文本)的对象。为了进行转换,我使用了itemify函数。所有这些代码都包含在包含下拉列表的表单组件中。

问题如下:

我有一个从服务器获取的对象数组。 目标是保留此对象数组(“旧对象”),并创建另一个对象(“ newObjects”)。这个新数组应包含从第一个数组转换而来的新对象,但其中:

newObject.key = oldObject.someProperty
newObject.display=oldObject.someOtherProperty

要进行此转换,我创建了“ itemify”功能。

现在,实际结果。 首先,我从服务器获取数据 然后,我通过转换获取API所获得的数组来创建另一个数组。

getProfiles = async () => {
    const result = await fetch(apiConfig.profilesAPI);
    const body = await result.json();

    if (body.data.length>0){            
        let temp = body.data;
        console.log(temp);
        let buffer = body.data.map(x=>itemify(x,"id","desc"));  


        this.setState((state,props)=>({
            profiles: body.data,
            profileItems: buffer
        }));
    }
}

编辑:这是我完整的itemify功能

function itemify(obj,id,display) {
    let retVal = {
        key: obj[id],
        display: obj[display]
    }
    console.log("obj: "+obj);
    console.log("retVal: "+retVal);
    return retVal;
    // return {key:obj[id],display:obj[display]} //prior version had only this line
}

如果我结帐控制台,我会得到:

My console

第一个日志来自第一个代码段

console.log(temp); 

如果需要更多代码,请告诉我。这部分代码不在github上。

1 个答案:

答案 0 :(得分:1)

问题解决了!

正如我所解释的,我试图将一个DropDown列表呈现为一个父组件。最终结果是下拉列表为空。

首先,我意识到我在登录控制台的方式上犯了一个错误。 错误的方式:

console.log("object " + object);

正确的方法:

console.log("object",object);

我以为在转换对象时我做错了什么。 毕竟,对象和转换都正确。

我发现我在管理状态和道具之间遇到了一些困惑。

我正在将表单发送的道具加载到子组件的状态(下拉列表)中-我现在意识到这可能没有多大意义。

我在其中使用项渲染数组的地方

this.state.items.map(x=>renderItems(x))

我替换为

this.props.items.map(x=>renderItems(x))

现在可以使用了! 毕竟,为什么要将其管理到状态...道具就足够了。经验教训!