【问题标题】：React-Native returning objects from nested arrayReact-Native 从嵌套数组返回对象
【发布时间】：2018-03-17 17:57:35
【问题描述】：

我是 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

谢谢。

【问题讨论】：

如果我理解你的问题，你应该写response.data.lineStatuses，因为statusSeverityDescription是lineStatuses的一部分。
嗨，Prasun，感谢您的回复，不幸的是，我在将响应更改为建议时收到此错误：TypeError: undefined us not an object evaluation' 'this.state.lineDetails.map'。
啊，response.data 是一个数组，抱歉我错过了。 details 有一个数组lineStatuses，因此response.data 将保持不变，但您需要更改处理details 的方式。您将通过在details 中的lineStatuses 数组上迭代得到statusSeverityDescription，例如details.lineStatuses[i].statusSeverityDescription。
如果你渲染这个<TubeCard>而不是这个<Text style={statusStyle}>{statusSeverityDescription}</Text>，你能看到这个statusSeverityDescription吗？

标签： javascript react-native jsx

【解决方案1】：

您必须使用lineStatuses 代替statusSeverityDescription 并将其映射以获取状态。

管列表：

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>
  );
};

【讨论】：

【解决方案2】：

感谢您的所有 cmets。我已经解决了 Prasun Pal 的 cmets 之后的问题。以下是我的新代码和工作应用程序的屏幕截图。

 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

【讨论】：