Question

所以有点坚持这个问题。我收到了一份艺术品清单的回复，这是一个深层嵌套的回应。我使用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，我想展示做最后一件艺术的艺术家，我能够通过放置{props.item.entities.artboards[id].last_art}来获取ID，但是我＆＃ 39;我无法使用它来获取上一个艺术的信息，即这可能是{props.item.entities.lastArt[id].date}或{props.item.entities.lastArt[id].artist}，因为last_art不是数组，而只是Number，这意味着我可以＆＃39; t使用map。

有更好的方法吗？在这种情况下我错过了什么？

Answer 1

所以我能够解决这个问题，它实际上是一个相当简单的解决方案。我不得不考虑last_art id也是null。

{{1}}

我认为使用Reselect肯定有更好的方法。

React Redux - Normalizr - 从嵌套数据中选择 - 按id选择

1 个答案: