Javascript 对组件进行代码拆分应用程序筛选、排序、添加、编辑和删除数据

我是新来的。我开始创建一个电话簿应用程序，它获取一个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;

从“React”导入React；
常量filteredAndSorted=（{contacts，search，sortIt，sortBy，direction，deleteContact}）=>{
如果（方向=='notsorted'）{
常量filteredData=contacts.filter(
联系人=>{
return contacts.name.toLowerCase（）.includes（search.toLowerCase（））||
contacts.address.toLowerCase（）.includes（search.toLowerCase（））||
联系人。电话号码。包括（搜索）；
})
返回(
{filteredData.map（（联系人）=>

姓名：{contacts.Name}
电话：{联系人。电话号码}
地址：{contacts.Address}
Id:{contacts.name}
deleteContact（contacts.name）}>delete


)}    
);
}
否则，如果（方向===‘升序’）{
让FilteredSortedData=
联络
.sort（（a，b）=>{if（a.nameb.name）{return 1；}return 0；}）
.过滤器(
联系人=>{
return contacts.name.toLowerCase（）.includes（search.toLowerCase（））||
contacts.address.toLowerCase（）.includes（search.toLowerCase（））||
联系人。电话号码。包括（搜索）；
})
返回(
{filteredAndSortedData.map（（联系人）=>

姓名：{contacts.Name}
电话：{联系人。电话号码}
地址：{contacts.Address}
Id:{contacts.name}
deleteContact（contacts.name）}>delete


)}    
);
}
否则，如果（方向==‘下降’）{
让FilteredSortedData=
联络
.sort（（a，b）=>{if（a.name>b.name）{return-1；}if（a.name{
return contacts.name.toLowerCase（）.includes（search.toLowerCase（））||
contacts.address.toLowerCase（）.includes（search.toLowerCase（））||
联系人。电话号码。包括（搜索）；
})
返回(
{filteredAndSortedData.map（（联系人）=>

姓名：{contacts.Name}
电话：{联系人。电话号码}
地址：{contacts.Address}
Id:{contacts.name}
deleteContact（contacts.name）}>delete


)}    
);
}
}
导出默认过滤器并排序；

---

我想把这个文件拆分成更小的组件，但我对通过它访问过滤器、排序和映射感到困惑。非常感谢您的建议。

快速建议：在顶部定义一个简单函数，如下所示：

const contactDetail=（联系人）=>

姓名：{contacts.Name}
电话：{联系人。电话号码}
地址：{contacts.Address}
Id:{contacts.name}
deleteContact（contacts.name）}>delete


)

从这里，您可以用更简单的表单替换

.map

调用：

FilteredSortedData.map（联系人详细信息）

非常感谢！这是我想不出来的。