如何在React Native中獲取對象數組中的對象

Question

我有點迷失於訪問靜態數據中的某些信息。 這是數據：

{
 "info1": {
    "label": "label",
    "class": "class-css",
    "title": "title",
    "text": "text",
    "number": "20",
    "tags": [
         {
            "name": "#twitter"
        },
        {
            "name": "#myspace"
        }
    ]
 },
 "info2": {
    "label": "label",
    "class": "class-css",
    "title": "title",
    "text": "text",
    "number": "20",
    "tags": [
         {
            "name": "#instagram"
        },
        {
            "name": "#facebook"
        }
    ]
  }
}

然后我得到第一個這樣的信息：

this.setState({
    currentLabel: this.state.labels["info1"]
})

這就是為什么我想要然后在組件中顯示信息的原因，並且在我嘗試獲取tags信息之前它一直有效。 我嘗試了.map()但沒有成功和錯誤。

<View>
   <Text>{infoDetail.title}</Text>
   <Text>{infoDetail.text}</Text>
   <Text>How do I get "tags" information</Text>
</View>

是否可以訪問數組“標簽”中的這些對象？

Answer 1

是的，您可以按照infoDetail.tags如下調用標簽並在其上進行映射

render(){
      const tagItems = infoDetail && infoDetail.tags.map((item, index) => {
          return <Text key={index}>{item.name}</Text>
      });
      return(
        <View>
          <Text>{infoDetail.title}</Text>
          <Text>{infoDetail.text}</Text>
          {tagItems}
        </View>
      )
}

Answer 2

大概是這樣的。 <Text>{infoDetail.tags.map(tag => {/*render */})}</Text>

Answer 3

您可以嘗試Object.keys()和Array.prototype.reduce()來獲取您喜歡的數據：

 const data = { "info1": { "label": "label", "class": "class-css", "title": "title", "text": "text", "number": "20", "tags": [ { "name": "#twitter" }, { "name": "#myspace" } ] }, "info2": { "label": "label", "class": "class-css", "title": "title", "text": "text", "number": "20", "tags": [ { "name": "#instagram" }, { "name": "#facebook" } ] } }; const tags = Object.keys(data).reduce((result, key) => { return result.concat(data[key].tags); }, []) console.log(tags); /* tags = [ { "name": "#twitter" }, { "name": "#myspace" }, { "name": "#instagram" }, { "name": "#facebook" } ] */ 

Answer 4

這是完整的工作代碼。 由於labels state屬性是一個對象，因此您需要以某種方式對其進行映射。 我在這里選擇了Object.values 。 您可以根據需要使用Object.keys甚至Object.entries 。

我使用了一個單獨的Info組件，並將值傳遞給它，然后在那里渲染。 在此組件中，我們再次映射tags ，然后呈現列表。

 class App extends React.Component { state = { labels: { info1: { label: "label1", class: "class-css", title: "title", text: "text", number: "20", tags: [ { name: "#twitter", }, { name: "#myspace", }, ], }, info2: { label: "label2", class: "class-css", title: "title", text: "text", number: "20", tags: [ { name: "#instagram", }, { name: "#facebook", }, ], }, }, } render() { const { labels } = this.state; return ( <div> { Object.values( labels ).map( value => <Info label={value} key={value.label} /> ) } </div> ); } } const Info = ( props ) => { const { title, text, tags } = props.label; const tagList = tags.map( tag => <p key={tag.name}>{tag.name}</p> ); return ( <div style={{ border: "1px solid gray", marginTop: "-1px" }}> <p>{title}</p> <p>{text}</p> <div>{tagList}</div> </div> ); }; ReactDOM.render( <App />, document.getElementById("root") ); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="root"></div> 

更新資料

如果您的數據是完全靜態的，那么@Xavi A.的方法是一個不錯的選擇。 我不知道您的列表如何，但是我提供了一個簡單的代碼，其中包括您想要的內容。

 const labels = { info1: { label: "label1", class: "class-css", title: "title", text: "text", number: "20", tags: [ { name: "#twitter" }, { name: "#myspace" } ] }, info2: { label: "label2", class: "class-css", title: "title", text: "text", number: "20", tags: [ { name: "#instagram" }, { name: "#facebook" } ] } }; class App extends React.Component { state = { currentLabel: Object.keys(labels)[0] }; handleInfoChange = info => this.setState({ currentLabel: info }); renderList = () => ( <ul> {Object.keys(labels).map(info => ( <Item key={info} info={info} onClick={this.handleInfoChange} /> ))} </ul> ); render() { const { currentLabel } = this.state; return ( <div> {this.renderList()} <Info currentLabel={currentLabel} /> </div> ); } } const Item = props => { const { info, onClick } = props; const handleClick = () => onClick(info); return <li onClick={handleClick}>{info}</li>; }; const Info = props => { const { currentLabel } = props; const { title, text, tags } = labels[currentLabel]; const tagList = tags.map(tag => <p key={tag.name}>{tag.name}</p>); return ( <div style={{ border: "1px solid gray", marginTop: "-1px" }}> <p>{title}</p> <p>{text}</p> <div>{tagList}</div> </div> ); }; ReactDOM.render( <App />, document.getElementById( "root" ) ); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="root"></div> 

Answer 5

無需將所有靜態數據保存在狀態中，只需保存選定的標簽即可使狀態更整潔：

onLabelSelect = label => {
    //label will be "info1" for example
    this.setState({
        currentLabel: label 
    })
}

然后在渲染中：

render(){ 
    //get infoDetail from staticData 
    const infoDetail = staticData[this.state.currentLabel]         
    return (
        <View>
            <Text>{infoDetail.title}</Text>
            <Text>{infoDetail.text}</Text>
            {infoDetail.tags.map( ({name}) => <Text>name</Text>)}
        </View>
    )
}

請注意地圖。 這個：

{infoDetail.tags.map( ({name}) => <Text>name</Text>)}

是以下內容的簡稱：

{infoDetail.tags.map( item => {
    return <Text>item.name</Text>
})}