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

因此，这种问题一直存在。我已经得到了一个艺术品列表的回应，这是一个深度嵌套的回应。我使用normalizr库规范了这个响应。React Redux - Normalizr - 从嵌套数据中选择 - 按ID选择

你可以看看下面的模式：

../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就可以了。

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

来源

2016-11-05 md85

可能无法正确进入您的问题！实际上你的'lastArt'包含了什么？ –

'lastArt'中有一个日期和'艺术家'。 – md85

然后将它称为'props.item.entities.lastArt.date'或'props.item.entities.lastArt.artist'，因为它与'id'或'artist'没有依赖关系。 –

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

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来做到这一点。

来源

2016-11-08 08:20:19 md85

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

回答

相关问题