Question

我有一个对象，稍后将由JSON响应结构替换，如下所示，我将其作为道具传递，并且在子组件中，我希望通过“值”映射以呈现数据。

App.js

“data”: {
         “title”: {
           “text”: “”
         },
         “subtitle”: {
           “text”: “”
         },
         “renderable”: [
           {
             “title”: {
               “text”: “”
             },
             “sub_title”: {
               “text”: “”
             },
             “values”: [
               {
                 “id”: “1”,
                 “title”: {
                   “text”: “”
                 },
                 “subtitle”: {
                   “text”: “”
                 },
                 “price_tag”: {
                   “text”: “Rs 99"
                 },
                 “preselected”: “true”
               },
               {
                 “id”: “2",
                 “title”: {
                   “text”: “”
                 },
                 “sub_title”: {
                   “text”: “”
                 },
                 “price_tag”: {
                   “text”: “Rs 199”
                 },
                 “preselected”: “false”
               },
             ]
           }
         ]
       }

class App extends React.Component {
  render() {
    return (
      <React.Fragment>
        <Demo options={data} />
      </React.Fragment>
    )
  }
}

我不确定在子组件中如何访问和映射可渲染内部的“值”（到目前为止，可渲染内部有一个对象，但稍后将填充）。

Answer 1

您的数据结构是

数据（对象）->可渲染（对象数组）->值（数组）

所以你先做

data.renderable...

然后，您可以映射到数组并点击每个包含值数组的对象。

data.renderable.map((obj) => obj.values)

然后可以在obj.values上进行映射，但是使用.flatMap()会更有意义，data.renderable.flatMap((obj) => obj.values.map((item) => item.id))会将所有项目放入一个一级数组中。

from requests.auth import HTTPBasicAuth
import requests

login = 'https://account.lyft.com/auth? 
next=https%3A%2F%2Fwww.lyft.com%2Flogin%2Fjump'

auth = HTTPBasicAuth('phone_number',"" )

r = requests.post(dashboard, auth = auth)
print(r.status_code)

Answer 2

示例演示可以显示

之类的数据

class Demo extends React.Component {

render(){
    const { data } = this.props;
    return (
        <div>
            <h1>{data.title}</h1>
            <h2>{data.subtitle</h1>
            <ul>
                {data.renderable.map(row => (
                    <h1>{row.title}</h1>
                    <h2>{row.subtitle</h1>
                        {row.values.map(item => (
                            <li key={item.id}>
                                {item.title}
                                {item.subtitle}
                                {item.price_tag}
                            </li>
                        ))}
                ))}
            </ul>
        </div>
        )
    }
}

export default Demo;

从嵌套的Json访问数据

2 个答案: