无法从反应道具中选择数组项

时间:2017-11-03 12:00:05

标签: arrays reactjs

我在使用道具选择无状态反应组件中的项目时遇到问题。

一般设置非常简单:

const useritem = {
  name: 'foo',
  images: [
    {url: 'urlstring1'},
    {url: 'urlstring2'}
  ]
}

const App = () => (
  <div style={styles}>
    <Hello name="CodeSandbox" />
    <h2>Start editing to see some magic happen {'\u2728'}</h2>
    <User useritem={useritem}/>
  </div>
);

const User = (props) => (
  <p>{`imageurl is ${props.useritem.images[0].url}`}</p>
);

render(<App />, document.getElementById('root'));

请参阅:https://codesandbox.io/s/9yk98okk64

上的工作示例

我有一个用户对象(硬编码为const useritem),其名称和图像数组包含两个图像对象。我将对象作为道具传递给用户组件。

让我头疼的部分是:  的 props.useritem.images [0] .URL
在上面的例子中,它当然是有效的。在我的本地环境中,它说“无法读取未定义的属性'0'”。所以图像数组似乎不存在,但是我仍然可以毫无问题地访问useritem.name的等价物。

有没有人知道问题可能在哪里?正如我所说的,上面的例子在代码框中工作(正如我所想的那样)。它会破裂的原因是什么?

1 个答案:

答案 0 :(得分:0)

当promises返回一个嵌套对象时,我遇到过这种问题。

这可能对您有用:

<?xml version="1.0" encoding="utf-8" standalone="yes"?> <data-set> <relations format-version="3" relations-version="20170805" main-table="GIDesign"> <link from="GIFilter (DesignID)" to="GIDesign (DesignID)" /> <link from="GIGroupBy (DesignID)" to="GIDesign (DesignID)" /> <link from="GIMassAction (DesignID)" to="GIDesign (DesignID)" /> <link from="GIMassUpdateField (DesignID)" to="GIDesign (DesignID)" /> <link from="GINavigationScreen (DesignID)" to="GIDesign (DesignID)" /> <link from="GINavigationParameter (DesignID, ScreenID)" to="GINavigationScreen (DesignID, ScreenID)" /> <link from="GIOn (DesignID, RelationNbr)" to="GIRelation (DesignID, LineNbr)" /> <link from="GIRecordDefault (DesignID)" to="GIDesign (DesignID)" /> <link from="GIRelation (DesignID, ParentTable)" to="GITable (DesignID, Alias)" /> <link from="GIRelation (DesignID, ChildTable)" to="GITable (DesignID, Alias)" /> <link from="GIResult (DesignID)" to="GIDesign (DesignID)" /> <link from="GIResult (ObjectName, DesignID)" to="GITable (Alias, DesignID)" /> <link from="GISort (DesignID)" to="GIDesign (DesignID)" /> <link from="GITable (DesignID)" to="GIDesign (DesignID)" /> <link from="GIWhere (DesignID)" to="GIDesign (DesignID)" /> <link from="SiteMap (Url)" to="GIDesign (DesignID)" type="WeakByUrl" linkname="toDesignById" baseurl="~/GenericInquiry/GenericInquiry.aspx" paramnames="id" /> <link from="SiteMap (Url)" to="GIDesign (Name)" type="WeakByUrl" linkname="toDesignByName" baseurl="~/GenericInquiry/GenericInquiry.aspx" /> <link from="ListEntryPoint (ListScreenID)" to="SiteMap (ScreenID)" /> <link from="SiteMap (ScreenID)" to="GIDesign (PrimaryScreenIDNew)" linkname="to1Screen" /> <link from="SiteMap (NodeID)" to="SiteMap (ParentID)" type="WeakToParent" recursive-nesting="yes" include-parents="False" /> <link from="MUIScreen (NodeID)" to="SiteMap (NodeID)" /> <link from="MUIWorkspace (WorkspaceID)" to="MUIScreen (WorkspaceID)" type="FromMaster" linkname="workspaceToScreen" split-location="yes" updateable="True" /> <link from="MUISubcategory (SubcategoryID)" to="MUIScreen (SubcategoryID)" type="FromMaster" updateable="True" /> <link from="MUITile (ScreenID)" to="SiteMap (ScreenID)" /> <link from="MUIWorkspace (WorkspaceID)" to="MUITile (WorkspaceID)" type="FromMaster" linkname="workspaceToTile" split-location="yes" updateable="True" /> <link from="MUIArea (AreaID)" to="MUIWorkspace (AreaID)" type="FromMaster" updateable="True" /> <link from="MUIPinnedScreen (NodeID, WorkspaceID)" to="MUIScreen (NodeID, WorkspaceID)" type="WeakIfEmpty" isEmpty="Username" /> <link from="MUIFavoriteWorkspace (WorkspaceID)" to="MUIWorkspace (WorkspaceID)" type="WeakIfEmpty" isEmpty="Username" /> <link from="GIDesign (NoteID)" to="Note (NoteID)" type="Note" /> <link from="GIFilter (NoteID)" to="Note (NoteID)" type="Note" /> <link from="GIFilter (NoteID)" to="GIFilterKvExt (RecordID)" type="RowKvExt" /> <link from="GIGroupBy (NoteID)" to="Note (NoteID)" type="Note" /> <link from="GIOn (NoteID)" to="Note (NoteID)" type="Note" /> <link from="GIRelation (NoteID)" to="Note (NoteID)" type="Note" /> <link from="GIResult (NoteID)" to="Note (NoteID)" type="Note" /> <link from="GIResult (NoteID)" to="GIResultKvExt (RecordID)" type="RowKvExt" /> <link from="GISort (NoteID)" to="Note (NoteID)" type="Note" /> <link from="GITable (NoteID)" to="Note (NoteID)" type="Note" /> <link from="GIWhere (NoteID)" to="Note (NoteID)" type="Note" /> </relations> <layout> <table name="GIDesign"> <table name="GIFilter" uplink="(DesignID) = (DesignID)"> <table name="Note" uplink="(NoteID) = (NoteID)" /> <table name="GIFilterKvExt" uplink="(NoteID) = (RecordID)" /> </table> <table name="GIGroupBy" uplink="(DesignID) = (DesignID)"> <table name="Note" uplink="(NoteID) = (NoteID)" /> </table> <table name="GIMassAction" uplink="(DesignID) = (DesignID)" /> <table name="GIMassUpdateField" uplink="(DesignID) = (DesignID)" /> <table name="GINavigationScreen" uplink="(DesignID) = (DesignID)"> <table name="GINavigationParameter" uplink="(DesignID, ScreenID) = (DesignID, ScreenID)" /> </table> <table name="GIRecordDefault" uplink="(DesignID) = (DesignID)" /> <table name="GISort" uplink="(DesignID) = (DesignID)"> <table name="Note" uplink="(NoteID) = (NoteID)" /> </table> <table name="GITable" uplink="(DesignID) = (DesignID)"> <table name="GIRelation" uplink="(DesignID, Alias) = (DesignID, ParentTable)"> <table name="GIOn" uplink="(DesignID, LineNbr) = (DesignID, RelationNbr)"> <table name="Note" uplink="(NoteID) = (NoteID)" /> </table> <table name="Note" uplink="(NoteID) = (NoteID)" /> </table> <table name="GIResult" uplink="(Alias, DesignID) = (ObjectName, DesignID)"> <table name="Note" uplink="(NoteID) = (NoteID)" /> <table name="GIResultKvExt" uplink="(NoteID) = (RecordID)" /> </table> <table name="Note" uplink="(NoteID) = (NoteID)" /> </table> <table name="GIWhere" uplink="(DesignID) = (DesignID)"> <table name="Note" uplink="(NoteID) = (NoteID)" /> </table> <table name="SiteMap" uplink="(DesignID) = (Url)" recursion="(NodeID) = (ParentID)" linkname="toDesignById"> <table name="ListEntryPoint" uplink="(ScreenID) = (ListScreenID)" /> <table name="MUIScreen" uplink="(NodeID) = (NodeID)"> <table name="MUIPinnedScreen" uplink="(NodeID, WorkspaceID) = (NodeID, WorkspaceID)" /> </table> <table name="MUITile" uplink="(ScreenID) = (ScreenID)" /> </table> <table name="SiteMap" uplink="(Name) = (Url)" recursion="(NodeID) = (ParentID)" linkname="toDesignByName"> <table name="ListEntryPoint" uplink="(ScreenID) = (ListScreenID)" /> <table name="MUIScreen" uplink="(NodeID) = (NodeID)"> <table name="MUIPinnedScreen" uplink="(NodeID, WorkspaceID) = (NodeID, WorkspaceID)" /> </table> <table name="MUITile" uplink="(ScreenID) = (ScreenID)" /> </table> <table name="SiteMap" uplink="(PrimaryScreenIDNew) = (ScreenID)" recursion="(NodeID) = (ParentID)" linkname="to1Screen"> <table name="ListEntryPoint" uplink="(ScreenID) = (ListScreenID)" /> <table name="MUIScreen" uplink="(NodeID) = (NodeID)"> <table name="MUIPinnedScreen" uplink="(NodeID, WorkspaceID) = (NodeID, WorkspaceID)" /> </table> <table name="MUITile" uplink="(ScreenID) = (ScreenID)" /> </table> <table name="Note" uplink="(NoteID) = (NoteID)" /> </table> <table name="MUIWorkspace"> <table name="MUIFavoriteWorkspace" uplink="(WorkspaceID) = (WorkspaceID)" /> </table> <table name="MUISubcategory" /> <table name="MUIArea" /> </layout> <data> <GIDesign> <row DesignID="64910ad5-ae67-4fca-b791-058849f2814d" Name="TESTDATES" FilterColCount="3" PagerStyle="0" PageSize="0" NewRecordCreationEnabled="0" MassDeleteEnabled="0" AutoConfirmDelete="0" MassRecordsUpdateEnabled="0" MassActionsOnRecordsEnabled="0" ExposeViaOData="0"> <GIFilter LineNbr="1" IsActive="1" Name="DateFrom" FieldName="INTran.tranDate" DataType="string" DisplayName="From Date" IsExpression="1" DefaultValue="@WeekStart-1" ColSpan="1" Required="0" /> <GIFilter LineNbr="2" IsActive="1" Name="DateTo" FieldName="INTran.tranDate" DataType="string" DisplayName="To Date" IsExpression="1" DefaultValue="@WeekEnd-1" ColSpan="1" Required="0" /> <GISort LineNbr="1" IsActive="1" DataFieldName="INTran.tranDate" SortOrder="A" /> <GISort LineNbr="2" IsActive="1" DataFieldName="InventoryItem.inventoryCD" SortOrder="A" /> <GITable Alias="INTran" Name="PX.Objects.IN.INTran"> <GIRelation LineNbr="1" ChildTable="InventoryItem" IsActive="1" JoinType="I"> <GIOn LineNbr="1" ParentField="inventoryID" Condition="E " ChildField="inventoryID" Operation="A" /> </GIRelation> <GIResult LineNbr="1" IsActive="1" Field="tranDate" SchemaField="INTran.TranDate" IsVisible="1" DefaultNav="1" RowID="0dcfd9ab-a8e9-4b47-9dbb-be31e37a0291" /> <GIResult LineNbr="2" IsActive="1" Field="tranType" SchemaField="INTran.TranType" IsVisible="1" DefaultNav="1" RowID="51d68bd5-e0d6-4d3a-8367-94260886de85" /> <GIResult LineNbr="4" IsActive="1" Field="qty" SchemaField="INTran.Qty" IsVisible="1" DefaultNav="1" RowID="cd4144b0-eef2-4266-9a1f-d6ee123e2445" /> <GIResult LineNbr="5" IsActive="1" Field="uOM" SchemaField="INTran.UOM" IsVisible="1" DefaultNav="1" RowID="df04268c-bded-4995-ab4a-97852c56f1be" /> </GITable> <GITable Alias="InventoryItem" Name="PX.Objects.IN.InventoryItem"> <GIResult LineNbr="3" IsActive="1" Field="inventoryID" SchemaField="InventoryItem.InventoryID" IsVisible="1" DefaultNav="1" RowID="627befa9-e0f8-41ab-b09d-df56e2aca331" /> </GITable> <GIWhere LineNbr="1" IsActive="1" OpenBrackets="( " DataFieldName="INTran.tranDate" Condition="B " IsExpression="0" Value1="[DateFrom]" Value2="[DateTo]" CloseBrackets=") " Operation="A" /> </row> </GIDesign> </data> </data-set>

这将检查images属性是否存在,然后获取URL,否则显示加载文本。