React代码拆分到组件应用程序过滤、排序、添加、编辑和删除数据

Question

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