Question

我正在获取一个包含嵌套数据的端点，我可以很好地显示业务信息。但是数据的位置部分，我不能。我需要遍历位置数据，无论尝试什么，我似乎都无法尝试，我试图对数据进行规范化，起初看起来像它可以工作，但是在前端访问数据时遇到了问题。

以下是我从Redux DevTools中获取的原始数据。

    payload: {
    data: {
      id: 1,
      user_id: 1,
      businessName: 'LUNCH',
      featured: false,
      logo: 'image.jpg',
      logoThumbnail: null,
      deleted: false,
      deletedOn: null,
      stripe_subscription_id: null,
      plan_id: null,
      subscription_active: true,
      referral_code: '8',
      website: '8',
      tags: null,
      category: null,
      business_locations: [
        {
          id: 1,
          business_id: 1,
          address: '88',
          address2: null,
          city: '*',
          province: '*',
          country: '*',
          postalCode: '*',
          coordinates_lat: *,
          coordinates_lon: *,
          phone: '*',
          featured: true,
          locationName: '*',
          businessName: '*',
        },
        {
          id: 2,
          business_id: 1,
          address: '*',
          address2: null,
          city: '*',
          province: '*',
          country: '*',
          postalCode: '*',
          coordinates_lat: *,
          coordinates_lon: *,
          phone: '*',
          featured: true,
          locationName: '*',
          businessName: 'LUNCH',
        }
      ],
      business_images: [],
      plan: null
    }
  }
}

这是我的简化视图：

class Locations extends React.Component {
  componentDidMount() {
    this.props.dispatch(fetchBusinesses());
  }
  render() {
    if (this.props.isLoading) {
      return (
        <SpinContainer>
          <Spin size="large" />
        </SpinContainer>
      );
    }

    console.log('locations: ',this.props.business)
    console.log('locations: ',this.state)

    return (
      <React.Fragment>
        HERE IM TRYING TO MAP THE CARDS ONE FOR EACH LOCATION
        <Card>

  {
      this.props.business.business_locations.map(location => 
        <div>
        <tr><td>{location.id}</td>
        <td>{location.businessName}</td></tr>
        </div>
      )
    }
        </Card>
      </React.Fragment>
    );
  }
}

function mapStateToProps(state) {
  const { isLoading, data } = state.business;
  return {
    business: data,
    isLoading,
  };
}


export default connect(mapStateToProps)(Locations);

无论我似乎在map函数的前面放了什么，它的未定义或this.props.business.map都不是函数

我尝试从数据和业务以及我认为的每个组合开始

此console.log（'locations：'，this.props.business）

它返回Object和与上面相同的响应

Answer 1

这是在您提供的数据上呈现表格的组件。

可运行的示例：https://codesandbox.io/embed/k3wrx2pv55

function App() {
  const data = {
    "id": "asuh",
    "user_id": 1,
    "businessName": "Place",
    "featured": false,
    "logo": "image.jpg",
    "logoThumbnail": null,
    "deleted": false,
    "deletedOn": null,
    "created_at": "2017-03-23T13:00:51.000Z",
    "updated_at": "2017-05-26T13:21:33.000Z",
    "stripe_subscription_id": null,
    "plan_id": null,
    "logo_url": "***",
    "logo_thumb_url": "**",
    "referral_code": "**",
    "website": "**",
    "tags": null,
    "category": null,
    "business_locations": [
        {
            "id": 1,
            "business_id": 1,
            "address": "*",
            "address2": null,
            "city": "*",
            "province": "*",
            "country": "*",
            "postalCode": "*",
            "coordinates_lat": 45,
            "coordinates_lon": 75,
            "phone": "**********",
            "locationName": "***",
            "businessName": "ACME",
        },
        {
            "id": 2,
            "business_id": 1,
            "address": "***",
            "address2": null,
            "city": "***",
            "province": "***",
            "country": "**",
            "postalCode": "***",
            "coordinates_lat": 45,
            "coordinates_lon": 75,
            "phone": "**********",
            "locationName": "Secondary",
            "businessName": "ACME",
        }
    ],
    "business_images": [],
    "plan": null
};

  return (
    <div className="App">
        <table>
          <thead>
            <tr><td>id</td></tr>
          </thead>
          <tbody>
            {data.business_locations.map(location => <tr><td>{location.id}</td><td>{location.businessName}</td></tr>)}                      
          </tbody>

        </table>

    </div>
  );
}

显示嵌套在Redux派发的json对象中的数据

1 个答案: