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

【问题标题】：React Redux - Normalizr - Selecting from nested data - select by idReact Redux - Normalizr - 从嵌套数据中选择 - 按 id 选择
【发布时间】：2017-03-19 05:25:35
【问题描述】：

所以有点卡在这个问题上。我收到了一份艺术品清单的回复，这是一个深度嵌套的回复。我已经使用 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，但是我无法使用它来从 lastArt 获取信息，即类似于 {props.item.entities.lastArt[id].date} 或 {props.item.entities.lastArt[id].artist}，因为 last_art 不是数组，而只是 Number，这意味着我不能在其上使用 map。

有没有更好的方法来做到这一点？在这种情况下我缺少什么？

【问题讨论】：

可能无法正确回答您的问题！你的 lastArt 实际上包含什么？
lastArt 有一个日期和artist。
然后将其称为props.item.entities.lastArt.date 或props.item.entities.lastArt.artist，因为它与id 或artist 没有依赖关系
不，我们需要从{props.item.entities.artboards[id].last_art}获取的id，然后我们可以通过props.item.entities.lastArt[id].date获取它们
状态已经归一化，从上面的实体结构可以看出。

标签： reactjs redux normalizr

【解决方案1】：

所以我能够解决这个问题，这实际上是一个相当简单的解决方案。我还必须考虑 last_art id 为空。

const PatientCard = (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>

                        <span className={props.lastArtClass}>
                            {props.item.entities.artboards[id].last_art !== null &&
                            <span>
                                <span>{props.item.entities.artists[props.item.entities.lastArt[props.item.entities.artboards[id].last_art].performed_by].name}, </span>
                                <FormattedRelative value={props.item.entities.lastArt[props.item.entities.artboards[id].last_art].date} />
                            </span>
                            }
                            {props.item.entities.artboards[id].last_art === null &&
                            <p>N/A</p>
                            }
                        </span>

                        {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>
        );
    };

我认为使用 Reselect 肯定有更好的方法来做到这一点。

【讨论】：