Question

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

API

List组件接受以下道具：

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

架构

ListItem

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

＆＃13;

{
    // 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
        }
    ]
}

＆＃13;

我的实施无效

journalList.jsx

＆＃13;

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;

＆＃13;

现在这里是父组件

journal.jsx

＆＃13;

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;

＆＃13;

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

＆＃13;

<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>

＆＃13;

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组件是＆＃34; unuseful＆＃34; 。它正在创建多个列表，但您只需要一个。将您的<JournalList>更改为此：

＆＃13;
＆＃13;
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;
＆＃13;
＆＃13;
＆＃13;

执行此操作后，您JournalList组件将非常有用，并且您不会需要<Journal>组件。

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

1 个答案: