javascript - 将代码拆分为组件应用程序过滤器、排序、添加、编辑、删除数据

Question

我是新来的 react 。我开始创建一个电话簿应用程序，它获取 json 文件，并将其加载到屏幕上。您可以对数据进行排序、过滤、添加、删除、编辑。我的问题是我无法使我的代码更简洁，而且看起来非常糟糕，因为我什至重复了代码块。

import React from 'react';

const filteredAndSorted = ({contacts, search, sortIt, sortBy, direction, deleteContact}) => {
    if (direction === 'notsorted') {
    const filteredData = contacts.filter(
    contacts => {
    return contacts.name.toLowerCase().includes(search.toLowerCase()) ||
    contacts.address.toLowerCase().includes(search.toLowerCase()) ||
    contacts.phone_number.includes(search);
    })
        return (
    <div>
    {filteredData.map((contacts) => 
        <ul className="gradient_text" key={contacts.name}>
        <li>Name: {contacts.name}</li>
        <li>Phone: {contacts.phone_number}</li>
        <li>Address: {contacts.address}</li>
        <li>Id: {contacts.name}</li>
        <button onClick={() => deleteContact(contacts.name)}>delete</button>
        <hr />
        </ul>
        )}    

       </div>

        );
    }
    else if(direction === 'Ascending') {
        let filteredAndSortedData = 
    contacts
    .sort((a, b) => { if(a.name < b.name) { return -1; } if(a.name > b.name) { return 1; } return 0; })
    .filter(
    contacts => {
    return contacts.name.toLowerCase().includes(search.toLowerCase()) ||
    contacts.address.toLowerCase().includes(search.toLowerCase()) ||
    contacts.phone_number.includes(search);
    })
        return (
    <div>
    {filteredAndSortedData.map((contacts) => 
        <ul className="gradient_text" key={contacts.name}>
        <li>Name: {contacts.name}</li>
        <li>Phone: {contacts.phone_number}</li>
        <li>Address: {contacts.address}</li>
        <li>Id: {contacts.name}</li>
        <button onClick={() => deleteContact(contacts.name)}>delete</button>
        <hr />
        </ul>
        )}    

       </div>

        );
    }
    else if(direction === 'Descending') {
        let filteredAndSortedData = 
    contacts
    .sort((a, b) => { if(a.name > b.name) { return -1; } if(a.name < b.name) { return 1; } return 0; })
    .filter(
    contacts => {
    return contacts.name.toLowerCase().includes(search.toLowerCase()) ||
    contacts.address.toLowerCase().includes(search.toLowerCase()) ||
    contacts.phone_number.includes(search);
    })
        return (
    <div>
    {filteredAndSortedData.map((contacts) => 
        <ul className="gradient_text" key={contacts.name}>
        <li>Name: {contacts.name}</li>
        <li>Phone: {contacts.phone_number}</li>
        <li>Address: {contacts.address}</li>
        <li>Id: {contacts.name}</li>
        <button onClick={() => deleteContact(contacts.name)}>delete</button>
        <hr />
        </ul>
        )}    

       </div>

        );
    }

}

export default filteredAndSorted;

我想将此文件拆分为更小的组件，但我对访问filteredAndSorted 和通过它进行映射感到困惑。非常感谢任何建议。

Answer 1

更快的建议:在顶部定义一个简单的函数，如下所示:

const contactDetail = (contacts) => 
    <ul className="gradient_text" key={contacts.name}>
    <li>Name: {contacts.name}</li>
    <li>Phone: {contacts.phone_number}</li>
    <li>Address: {contacts.address}</li>
    <li>Id: {contacts.name}</li>
    <button onClick={() => deleteContact(contacts.name)}>delete</button>
    <hr />
    </ul>
    )

从这里您可以用更简单的形式替换 .map 调用:

filteredAndSortedData.map(contactDetail)