使用useEffect手动排序反应表不工作

Question

我试图在反应表中使用useEffect手动排序列。结果是出乎意料的，我正在努力理解我错过了什么。

在页面加载时第一次调用它时，它不输出任何东西，正如预期的那样。当我第一次单击列标题时，更改为状态。sortBy被检测到并且如预期的那样为false，并且setFetchSortDirection('Ascending')如预期的那样被命中。setFetchColumn似乎也像预期的那样被设置为正确的列名。这就是问题所在。

两个useState都显示为空，这是不期望的。

当我再次点击相同的标题setFetchSortDirection('降序')似乎被击中为sortBy。Desc现在是正确的。在这里fetchSortDirection被设置为升序。我不明白为什么，既然降序的条件满足了，而且"出现"了。

DataTable.tsx

const [fetchColumn, setFetchColumn] = useState('');
const [fetchSortDirection, setFetchSortDirection] = useState('');
...
useEffect(() => {
if (state.sortBy.length > 0) {
if (state.sortBy[0].desc)
setFetchSortDirection('Descending');
if (!state.sortBy[0].desc)
setFetchSortDirection('Ascending');
else
setFetchSortDirection('');
setFetchColumn(state.sortBy[0].id); 
props.fetchData(fetchColumn, fetchSortDirection);
} 
console.log(fetchSortDirection ? fetchSortDirection : "nothing")
}, [state.sortBy]);

Answer 1

这就是最终的解决方案

const [fetchColumn, setFetchColumn] = useState('');
const [fetchSortDirection, setFetchSortDirection] = useState('');
useEffect(() => {
if (state.sortBy.length > 0) {
if (state.sortBy[0].desc) {
setFetchSortDirection('Descending');
} else {
setFetchSortDirection('Ascending');
}
setFetchColumn(state.sortBy[0].id);
}
}, [state.sortBy]);
useEffect(() => {
if (fetchColumn && fetchSortDirection) {
props.fetchData(fetchColumn, fetchSortDirection);
}
}, [fetchColumn, fetchSortDirection]);
console.log(fetchSortDirection ? fetchSortDirection : "nothing");