我有一个像这样的对象
const example = [{medicineName : "Some name"
medicineId : 1}
{medicineName : "Some other name"
medicineId : 2}
]
const [filteredMedicineList, setFilteredMedicineList] = useState([]);我 map 在 filteredMedicineList 上生成一些其他 DOM 元素。
filteredMedicineList.map((data) => {
return <SingleMedicine data={data} key={data.medicineId} />;
})同样在页面上，我有某种 button ，单击时应该按特定顺序对 medicineList 进行排序。
const compareFunction = (a, b) => {
if (a.medicineName < b.medicineName) {
return -1;
}
if (a.medicineName > b.medicineName) {
return -1;
}
return 0;
};
const handleSort = (sortBy) => {
filteredMedicineList.sort(compareFunction);
console.log("After sort");
console.log(arrayX);
};我的问题是如何获得排序的更改或结果以反映我映射的组件。我不能使用 useEffect 因为我相信 useEffect 是在某些事情发生变化时，我不确定这里有什么变化。就像在我的示例中一样，我希望数组按照 <Singlemedicine/> 组件也显示更改的顺序进行排序。
第二个问题。在我的 compareFunction() 中，这只是一些代码，我复制粘贴了，我不明白。如何在字符串中检查相等性？就像 javascript 如何确定字符串 "COW" 大于 "Carmel" 是通过字符串的长度吗？原谅菜鸟然后帮忙
回答1
以下行直接更改 filteredMedicineList 并且仍然 React 看到对数组的旧引用，它不会触发 React 重新渲染。
filteredMedicineList.sort(compareFunction);setFilteredMedicineList((prevFilteredMedicineList) => {
const copyOfprevFilteredMedicineList = [...prevFilteredMedicineList];
copyOfprevFilteredMedicineList.sort(compareFunction);
return copyOfprevFilteredMedicineList;
});const example = [
{ medicineName: "Some name", medicineId: 1 },
{ medicineName: "Some other name", medicineId: 2 }
];
const App = () => {
const [filteredMedicineList, setFilteredMedicineList] = React.useState(example);
const compareFunction = (a, b) => {
if (a.medicineName < b.medicineName) {
return 1;
}
if (a.medicineName > b.medicineName) {
return -1;
}
return 0;
};
const handleSort = (sortBy) => {
setFilteredMedicineList((prevFilteredMedicineList) => {
const copyOfprevFilteredMedicineList = [...prevFilteredMedicineList];
copyOfprevFilteredMedicineList.sort(compareFunction);
return copyOfprevFilteredMedicineList;
});
};
return (
<div className="App">
<button onClick={handleSort}>SORT</button>
{filteredMedicineList.map(({ medicineName, medicineId }) => (
<div key={medicineId}>{medicineName}</div>
))}
</div>
);
}
ReactDOM.render(<App />, document.querySelector('.react'));<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>回答2
您必须使用 setState 来触发渲染。数组的引用应该改变并且组件将重新渲染。
const handleSort = (sortBy) => {
filteredMedicineList.sort(compareFunction);
setFilteredMedicineList([...filteredMedicineList]);
console.log("After sort");
console.log(arrayX);
};关于你的第二个问题，cow 比 camel 大多少是通过逐个比较字符来实现的。 C 然后 O > C 然后 A。