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選擇

回答

相關問題