如何从对象数组创建反应列表组件？

Question

一位开发人员给了我一个 api 规范，它List可以接受使用下面描述的形状的对象数组ListItem；这将被转换为一组渲染List.Item组件。

应用程序编程接口

该List组件接受以下属性：

• items（ListItem[]）：必需的。该数组应包含一个或多个 JSX 元素，或者一个或多个ListItem对象（详细信息请参见下文）。
• searchable（string[]）： 选修的。接受与 ListItem 属性名称匹配的字符串数组。如果存在，则会在列表上方呈现本地化的自由格式搜索框，并且该字段中的输入将使用提供的键作为指导来过滤内部数据。

模式

---

ListItem

ListItem是列表中单个项目的对象架构。

{
    // REQUIRED: The main title of the list item.
    title: string,
    // OPTIONAL: A secondary title.
    subtitle: string,
    // OPTIONAL: Additional labeling which appears directly below the title or subtitle label: String,
    // OPTIONAL: If provided, a date will always appear at the top of the list item
    date: Date,
    // OPTIONAL: An array of actions which are appended to the right side of the list item.
    actions: [
        {
            label: string | JSX.Element,
            action: Function
        }
    ]
}

---

我的实现不起作用

journalList.jsx

import PropTypes from "prop-types";
import React from "react";
import {Components} from "reusable-web-components";

const {
    Icon,
    List
} = Components;

const JournalList = (props) => {
  const {description, title} = props;
  
  const formattedItems = [
    {
        title: title,
        description: description,
        actions: [
            {
                label: <Icon name="edit" />,
                action: () => {}
            },
            {
                label: <Icon name="delete" />,
                action: () => {}
            }
        ]
    }
];
    return(
        <List items={formattedItems} searchable={["title"]} />
    )
}

JournalList.propTypes = {
  "title": PropTypes.string.isRequired,
  "description": PropTypes.string.isRequired
};

JournalList.defaultProps = {
    
};

export default JournalList;

---

现在这是父组件

journal.jsx

import api from "bees";
import JournalList from './JournalList';
import React from "react";
import store from "store";


class Journal extends React.Component {
    constructor (props) {
        super(props)
        this.state = {
            "displayList": true,
            "journalList": null,
            "searchJournalList": []
        }
    }

    componentDidMount = () => {
        store.dispatch(api.getJournals()).then((result) => {
            this.setState(() => ({"journalList": result.body.data}));
        }).
            catch(() => {
                this.setState(() => ({"journalList": []}));
            });
    }

    onEdit = () => {
        // TODO: Update a Journal
    }

    onDelete = () => {
        // TODO: Delete a Journal 
    }
    render() {
        return (
            <div>
               
                    <JournalList>
                        {
                            journalList.map((items) => {
                                return{
                                    key={items.title}
                                        title={items.title} 
                                        description={items.description} 
                                }
                            })                            
                        }
                    </JournalList>
               
            </div>            
        ) 
    }   
}


export default Journal;

我需要能够成功迭代从商店获取的数据并创建journal条目列表。根据他的文档，输出应该如下所示：

<div>
  <div class="list">
    <div class="list__search">
      <div class="form-group">
        <input placeholder="Search" id="ListSearch_0.1429790340540955" class="form-control">
      </div>
    </div>
    <div class="list__item">
      <div class="list-item">
        <div class="list-item__contents">
          <div class="list-item-contents">
            <div class="list-item-contents__title">Journal 1</div>
            <div class="list-item-contents__title">Journal 2</div>
          </div>
        </div>
        <div class="list-item__actions">
          <button class="list-item-action"><svg class="icon icon--medium"><use xlink: href="#edit-icon"></use></svg></button>
          <button class="list-item-action"><svg class="icon icon--medium"><use xlink: href="#delete-icon"></use></svg></button>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

The render method of your Journal component should be like:

render() {
    return (
        <div>
            {this.state.journalList.map((items) => {
                <JournalList key={items.title}
                             title={items.title} 
                             description={items.description}>
                </JournalList>
                       })                            
            }
        </div>            
    ) 
} 

And change the state declaration to:

this.state = {
        displayList: true,
        journalList: [],
        searchJournalList: []
    }

You've reversed the order of the things. The map() should wrap the component <JournalList>, instead of the <JournalList> wrap the journalList.map(). Because the map will iterate through the journalList and create each component.

EDIT:

Your JournalList component is "unuseful". It is creating multiple lists, but you only needs one. Change your <JournalList> to this:

render() {
    return (
        <div>
            {this.state.journalList.map((items) => {
                <JournalList key={items.title}
                             title={items.title} 
                             description={items.description}>
                </JournalList>
                       })                            
            }
        </div>            
    ) 
} 

Doing this, you JournalList component will be useful, and you won't need the <Journal> Component.