我一直在寻找类似的问题,但我发现的问题都没有真正解决我的问题...
编辑:整个想法是开发一个可重用的下拉组件,我将项目直接通过道具。这些项目必须是具有键(用于字段值)和显示属性(用于值文本)的对象。要进行转换,请使用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上。
问题解决了!
正如我所解释的,我试图将DropDown列表呈现到父组件(一种表单)中。最终结果是下拉列表为空。
首先,我意识到我在登录控制台的方式上犯了一个错误。错误的方法:
console.log("object " + object);
正确方法:
console.log("object",object);
我以为转换对象时做错了什么。毕竟,对象和转换都是正确的。
我发现我在管理状态和道具之间遇到了一些困惑。
我正在将从表单发送的道具加载到子组件的状态(下拉列表)中-我现在意识到这可能没有多大意义。
我在哪里使用项目渲染数组
this.state.items.map(x=>renderItems(x))
我换成
this.props.items.map(x=>renderItems(x))
现在就可以了!毕竟,为什么要将其管理到状态...道具就足够了。学习到教训了!
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句