Реагировать - как визуализировать вложенный объект с renderItem

Question

Я немного борюсь с рендерингом вложенных объектов в моем интерфейсе.Я знаю, что может быть полезна функция карты, но я не уверен, как заставить ее работать в моем случае (с renderItem).Я использую серверную часть Rest API Framework и Django.

Вот как выглядит структура JSON.

{
    "id": 1,
    "name": "Job 1",
    "address": [
        {
            "id": 4,
            "street": "65 Karamea Street",
            "suburb": "Beautiful Surburb",
            "town": "Christchurch",
            "postcode": "8001",
            "address_type": "h"
        }
    ],
    "franchise": {
        "id": 2,
        "name": "Company ABC",
        "person": 2,
        "legal_name": "Company ABC Ltd.",
        "created": "2019-08-09T09:40:35.697582Z",
        "modified": "2019-09-23T03:21:43.258983Z",
        "region": {
            "id": 4,
            "region": "QueensTown"
        }
    },
    "customer1": {
        "id": 1,
        "last_name": "Tom",
        "first_name": "Wilson",
        "address": [
            {
                "id": 11,
                "street": "1 Sunset Road",
                "suburb": "Auckland",
                "town": "Auckland",
                "postcode": "1234"
            }
        ]
}

Это код React:

import React from 'react';
import { List, Card } from 'antd';


const Job = props => {
  return (
    <React.Fragment>
      <List
        grid={{
          gutter: 16,
          xs: 1,
          sm: 2,
          md: 4,
          lg: 4,
          xl: 6,
          xxl: 3,
        }}
        dataSource={props.data}
        renderItem={item => (
          <List.Item>
            <Card title={<a href={`/job/${item.id}`}>{item.customer1.first_name}</a>}>{item.franchise.legan_name}
                                    <span> | Based on </span>
                                    {item.name}
            </Card>
          </List.Item>
        )}
      />
      </React.Fragment>
  );
};

export default Job;

В объекте card я хочу отобразить first_name из customer1 и legal_name из franchise.Очевидно, item.customer1.first_name и item.franchise.legal_name не работают.

Я новичок в реагировании, любая помощь будет высоко ценится!Было бы здорово, если бы вы могли предоставить какой-то реальный код, просто чтобы быть конкретным.

Большое спасибо заранее.

Answer 1

Вы отправляете не массив заданий, а объект в List.

Изменения сделаны: -

1) Преобразован переданный объект в массив.

2) Исправленоимя атрибута item.franchise.legal_name

Ниже рабочий код: -

import React from "react";
import ReactDOM from "react-dom";
import { List, Card } from "antd";


class App extends React.Component {
  render() {
    return (
      <React.Fragment>
        <List
          grid={{
            gutter: 16,
            xs: 1,
            sm: 2,
            md: 4,
            lg: 4,
            xl: 6,
            xxl: 3
          }}
          dataSource={new Array(this.props.data)}
          renderItem={item => (
            <List.Item>
              <Card
                title={
                  <a href={`/job/${item.id}`}>{item.customer1.first_name}</a>
                }
              >
                {item.franchise.legal_name}
                <span> | Based on </span>
                {item.name}
              </Card>
            </List.Item>
          )}
        />
      </React.Fragment>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 2

Чтобы показать ваши данные JSON, вы должны использовать map в вашем рендере (). Вот как карта работает

render(){return(
 < div>{this.state.mydata.map(m=><div>{m.  name < /div> })
 < /div>
);

Теперь, чтобы использовать ваши вложенные данные На карте вы можете отобразить *Снова 1005 * (как m.map (...))

Надеюсь, вы поняли идею и работаете для вас