如何在初始化时触发useEffect而不改变React中的状态

Question

我想获得一个数据列表，并在页面首次加载时对其进行排序，然后我希望能够按(fName(或(lName(进行排序。排序在我触发状态更改时起作用，但在初始加载时不起作用，它按数据库给我的顺序显示，我想在加载数据后立即触发排序。

我尝试了我能想到的所有解决方案，但都没有成功。

sortByfName((和sortBylName((作为回调从那里传递到to触发器。

由于某种原因，排序是向后的，这就是为什么我传递相反的值，但这是我稍后将解决的另一个怪癖：-(

function App() {
const [contacts, setContacts] = useState([]);
const [sortBy, setSortBy] = useState('lName');
// GET DATA FROM SERVER
useEffect(() => {
axios
.get('http://localhost:5000/')
.then((result) => {
setContacts(result.data);
})
.catch((err) => console.log(err));
}, []);
// SORT CONTACTS
useEffect(() => {
const sorted = contacts.sort((a, b) => {
let nameA = a[sortBy].toUpperCase();
let nameB = b[sortBy].toUpperCase();
if (nameA < nameB) return -1;
if (nameA > nameB) return 1;
return 0;
});
setContacts(sorted);
}, [sortBy, contacts]);
const sortByfName = () => setSortBy('lName');
const sortBylName = () => setSortBy('fName');
... A few more functions and then render the JSX

Answer 1

我建议您在组件装载上设置contacts状态之前执行排序逻辑。请参阅我对.then回调的评论

// GET DATA FROM SERVER
useEffect(() => {
axios
.get('http://localhost:5000/')
.then((result) => {
// perform sorting logic here before setting contacts
setContacts(result.data);
})
.catch((err) => console.log(err));
}, []);

除此之外，我想您可以重构API，在返回结果之前根据X字段进行排序

Answer 2

首先，最好将一个排序参数传递给API调用，这是常见和最好的做法：http://localhost:5000/?sort=fName

但如果不可能，则必须在获取响应后立即对数据进行排序。

// GET DATA FROM SERVER
useEffect(() => {
axios
.get('http://localhost:5000/')
.then((result) => {
const sortedData = sortHandler(result.data, sortBy);
setContacts(sortedData);
})
.catch((err) => console.log(err));
}, []);

和

const sortHandler = (data, sortBy) => {
return data.sort((a, b) => {
let nameA = a[sortBy].toUpperCase();
let nameB = b[sortBy].toUpperCase();
if (nameA < nameB) return -1;
if (nameA > nameB) return 1;
return 0;
});
}

以及对改变状态的进一步排序

// SORT CONTACTS
useEffect(() => {
const sorted = sortHandler(contacts, sortBy);
setContacts(sorted);
}, [sortBy, contacts]);

Answer 3

感谢您提供的所有出色的解决方案，但我最终选择了另一种对我来说更好的方法。

首先，我在数据库调用中进行了初始排序。最佳实践：-(

然后，在useEffect中使用排序是愚蠢的，因为它是由事件触发的，所以我只是制作了一个正常的函数来传递给带有按钮的组件。我使用该事件来获取sortBy参数。

function App() {
const [contacts, setContacts] = useState([]);
// GET DATA FROM SERVER
useEffect(() => {
axios
.get('http://localhost:5000/')
.then((result) => {
setContacts(result.data);
})
.catch((err) => console.log(err));
}, []);
// SORT CONTACTS
const sort = (event) => {
event.preventDefault();
const sortBy = event.target.getAttribute('name');
const sortContacts = [...contacts];
sortContacts.sort((a, b) => {
let nameA = a[sortBy].toUpperCase();
let nameB = b[sortBy].toUpperCase();
if (nameA < nameB) return -1;
if (nameA > nameB) return 1;
return 0;
});
setContacts(sortContacts);
};
// And so on