我一直在寻找类似的问题,但我发现的问题都没有真正解决我的问题...
编辑:
整个想法是开发一个可重用的下拉组件,在其中我可以直接通过道具传递物品。这些项目必须是带有键(用于字段值)和显示属性(用于值文本)的对象。为了进行转换,我使用了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
}
如果我结帐控制台,我会得到:
第一个日志来自第一个代码段
console.log(temp);
如果需要更多代码,请告诉我。这部分代码不在github上。
答案 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))
现在可以使用了! 毕竟,为什么要将其管理到状态...道具就足够了。经验教训!