所以有点卡在这个问题上。我收到了一份艺术品列表的回复,这是一个非常嵌套的回复。我已经使用 normalizr 库规范了这个响应。
您可以查看以下架构:
../schema.js
import { Schema, arrayOf } from 'normalizr'
const artboardSchema = new Schema('artboards', { idAttribute: 'id' });
const artistSchema = new Schema('artists', { idAttribute: 'id' });
const lastArtSchema = new Schema('lastArt', { idAttribute: 'id' });
const artSchema = new Schema('art', { idAttribute: 'id' });
const artAssetSet = new Schema('artAssetSet', { idAttribute: 'url'});
artboardSchema.define({
collaborated_by: arrayOf(artistSchema),
last_art: lastArtSchema,
art: arrayOf(artSchema)
});
artSchema.define({
artasset_set: arrayOf(artAssetSet),
performed_by: artistSchema
});
lastArtSchema.define({
performed_by: artistSchema
});
export { artboardSchema }
到目前为止,这工作得很好,数据正在被规范化,我在状态树中保存了以下响应:
artboard:
entities:
artboards {}
artists {}
lastArt {}
art {}
artAssetSet {}
result:
[2,3,4,5,6]
所以现在我有一个组件可以获取这些数据并显示它。
../ArtCard.jsx
const ArtCard = (props) => {
return (
<div className={props.cardContainer}>
{props.item.result.map( id =>
<div className={props.itemClass} value={id} key={id}>
<h5>{props.item.entities.artboards[id].name}</h5>
<p>{props.item.entities.artboards[id].uid}</p>
{props.item.entities.artboards[id].collaborated_by.map( id =>
<Avatar key={id} name={props.item.entities.artists[id].name} size={40} round={true}/>
)}
<button className="btn btn-primary" style={{cursor: 'pointer'}} onClick={() => {
props.onSubmit()
}
}>Details</button>
</div>
)}
</div>
);
};
上述组件从状态树中获取整个画板对象,然后我们在其上运行 .map 以通过 id 获取画板。
我遇到的麻烦是关于last_art,我想显示完成最后一幅艺术的艺术家,我可以通过放置来获取id {props.item.entities.artboards[id].last_art}
,但是我无法使用它从lastArt获取信息,即这将类似于{props.item.entities.lastArt[id].date}
last_art{props.item.entities.lastArt[id].artist}
不是一个数组,而只是一个Number
,这意味着我不能使用map
它。
有一个更好的方法吗?在这种情况下我错过了什么?