Question

我有点想在前端渲染嵌套对象。我知道有一个map函数可能会有所帮助，但是我不确定如何使它在我的情况下（使用renderItem）起作用。我正在使用的后端是Rest API框架和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的{{1}}和customer1的{{1}}。显然legal_name和franchise无效。

我是React的新手，任何帮助将不胜感激！如果您可以提供一些特定的实际代码，那就太好了。

非常感谢。

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数据，您应该在render（）中使用map 地图就是这样

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

现在为了使用您的嵌套数据在地图中，您可以再次映射m（例如m.map（...））

希望您能理解并为您工作

React-如何使用renderItem

2 个答案: