TubeList：

Question

我是React-Native的新手并且正在努力从嵌套数组中返回对象（希望我使用的是正确的术语）。

我从tfl管状态获取我的数据api JSON如下：

[
 {
   "$type": "Tfl.Api.Presentation.Entities.Line, 
   Tfl.Api.Presentation.Entities",
   "id": "bakerloo",
   "name": "Bakerloo",
   "modeName": "tube",
   "disruptions": [],
   "created": "2018-03-13T13:40:58.76Z",
   "modified": "2018-03-13T13:40:58.76Z",
   "lineStatuses": [
       {
         "$type": "Tfl.Api.Presentation.Entities.LineStatus, 
          Tfl.Api.Presentation.Entities",
          "id": 0,
          "statusSeverity": 10,
          "statusSeverityDescription": "Good Service",
          "created": "0001-01-01T00:00:00",
          "validityPeriods": []
        }
   ],
   "routeSections": [],
   "serviceTypes": [],
   "crowding": {}
},

我使用Axios获取数据。

state = { lineDetails: [] };

componentDidMount() {
    axios.get('https://api.tfl.gov.uk/line/mode/tube/status')
    .then(response => this.setState({ lineDetails: response.data }));
};

我正在返回这样的数据。

    renderLineDetails() {
    return this.state.lineDetails.map((details) => 
    <TubeList
    key={details.id}
    details={details} />

)};


 render() {
    return (
        <ScrollView>
            {this.renderLineDetails()}
        </ScrollView>
    );
}

My TubeList component looks like:

const TubeList = ({ details }) => {
const { name, statusSeverityDescription } = details;
const { nameStyle, statusStyle } = styles;

return (
    <TubeCard>
        <CardSectionTitle>
            <Text style={nameStyle}>{name}</Text>
        </CardSectionTitle>
        <CardSectionStatus>
            <Text style={statusStyle}>{statusSeverityDescription}</Text>
        </CardSectionStatus>
    </TubeCard>
);

};

有人能够解释为什么statusSeverityDescription没有显示在我的下面的列表中。

Iphone Simulator image

谢谢。

Answer 1

而不是statusSeverityDescription，您必须使用lineStatuses并将其映射以获取状态。

TubeList：

const TubeList = ({ details }) => {
  const { name, lineStatuses } = details;
  const { nameStyle, statusStyle } = styles;

  return (
    <TubeCard>
        <CardSectionTitle>
            <Text style={nameStyle}>{name}</Text>
        </CardSectionTitle>

        {lineStatuses.map((status) =>
           <CardSectionStatus>
            <Text style={statusStyle}>{status.statusSeverityDescription}</Text>
           </CardSectionStatus>
        }

    </TubeCard>
  );
};

Answer 2

感谢您的所有评论。我在Prasun Pal的评论之后解决了这个问题。以下是我的新代码和工作应用的截图。

 renderLineDetails() {
    return this.state.lineDetails.map((details) => 
    <TubeList
    key={details.id}
    lineStatus={details.lineStatuses[0]}
    lineName={details}
    />
)};

const TubeList = ({ lineName, lineStatus }) => {
const { statusSeverityDescription } = lineStatus;
const { name } = lineName;
const { nameStyle, statusStyle } = styles;

return (
    <TubeCard>
        <CardSectionTitle>
            <Text style={nameStyle}>{name}</Text>
        </CardSectionTitle>
        <CardSectionStatus>
            <Text style={statusStyle}>{statusSeverityDescription}</Text>
        </CardSectionStatus>
    </TubeCard>
);

};

iPhone screenshot of working app

React-Native从嵌套数组返回对象

2 个答案:

TubeList：