javascript - 如何从对象数组创建 react 列表组件？

Question

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

API

List 组件接受以下属性:

• 项目 (ListItem[]):必需。该数组应包含一个或多个 JSX 元素，或一个或多个 ListItem 对象(详情见下文)。
• searchable (string[]):可选。接受与 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

您的 Journal 的渲染方法组件应该是这样的:

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

并将状态声明更改为:

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

你颠倒了事物的顺序。 map()应该包装组件 <JournalList> , 而不是 <JournalList>包装 journalList.map() .因为map将遍历 journalList并创建每个组件。

编辑:

您的 JournalList 组件“无用”。它正在创建多个列表，但您只需要一个。更改您的 <JournalList>对此:

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

const {
    Icon,
    List
} = Components;

const JournalList = (props) => {
    state = {
       journalList: []
    }
    componentDidMount = () => {
        store.dispatch(api.getJournals()).then((result) => {
            var formattedItems = result.body.data.map( data => {
              title: data.title,
              description: data.description,
                 actions: [
                    {
                       label: <Icon name="edit" />,
                       action: () => {}
                    },
                    {
                       label: <Icon name="delete" />,
                       action: () => {}
                    }
                 ] 
              }) // End of the map
            this.setState(() => ({"journalList": formattedItems}));
        }).
            catch(() => {
                this.setState(() => ({"journalList": []}));
            });
    }
    render(){
       return(
          <List items={this.state.journalList} searchable={["title"]} />
       )
    }
}

export default JournalList;

这样做，你 JournalList组件会有用，你不需要 <Journal>组件。