Reactjs 我是否应该忽略这个“问题”;React Hook useEffect缺少一个依赖项“;此场景中的错误
我对使用react和hook还不熟悉。我有一个场景,我正在编码,根据表单的viewmode状态加载员工列表。。。这是基于url参数设置的。无论如何,我只想在viewmode更改时从db加载数据(员工对象数组)。独立地,当用户选择一些排序选项时,我还在内存中的employee对象数组中进行排序 在我的useEffect中,我加载viewmode的数据,然后根据当前的排序选项对其进行排序(我知道我可以用SQL完成这一切,但现在我用javascript完成)。在任何时候,用户都可以更改排序顺序(无需更改viewmode),我只需重新排序数据(无需再次从db加载数据,这是通过创建employee对象数组的副本、对其排序并调用setState来完成的)。这些场景运行良好,但我遇到了eslint错误“React Hook useEffect缺少依赖项:'sortEmployeesc' 我已经尝试将sort函数(sortEmployeesc)移动到useffect中,但是它告诉我我对sortMode.sortby和sorMode.order有依赖关系。问题是,如果SQL数据只是在进行排序,我不想再次抓取它们(通过useEffect),因为我在排序控件的事件处理程序中处理它们(在这里我调用sort,然后在数组上设置state)。(因此,如果只是排序顺序发生变化,我不希望这种依赖关系导致useEffect发生) 我是一个新的反应和钩子,所以也许我错过了一些明显的东西Reactjs 我是否应该忽略这个“问题”;React Hook useEffect缺少一个依赖项“;此场景中的错误,reactjs,dependencies,react-hooks,eslint,Reactjs,Dependencies,React Hooks,Eslint,我对使用react和hook还不熟悉。我有一个场景,我正在编码,根据表单的viewmode状态加载员工列表。。。这是基于url参数设置的。无论如何,我只想在viewmode更改时从db加载数据(员工对象数组)。独立地,当用户选择一些排序选项时,我还在内存中的employee对象数组中进行排序 在我的useEffect中,我加载viewmode的数据,然后根据当前的排序选项对其进行排序(我知道我可以用SQL完成这一切,但现在我用javascript完成)。在任何时候,用户都可以更改排序顺序(无需更
function EmployeesPage(props) {
const activeStyle = { color: "green" };
//holds the array of employee objects
const [employees, setEmployees] = useState([]);
const [sortMode, setSortMode] = useState({
sortBy: "LastName",
order: "Ascending",
});
debugger;
const viewmodein = props.match.params.viewmode;
const viewmode = viewmodein !== undefined ? viewmodein : "nonarchived"; //sets default viewmode
//creates a copy of the state employees array, sorts it and updates state
function sortEmployees(updatedSortMode) {
let copy = []
.concat(employees)
.sort(compareValues(updatedSortMode.sortBy, updatedSortMode.order));
debugger;
setEmployees(copy);
}
//given an array of employees, sorts it and updates state
function sortEmployeesc(_employees) {
_employees.sort(compareValues(sortMode.sortBy, sortMode.order));
debugger;
setEmployees(_employees);
}
//use effect that happens when viewmode changes (loads data from db)
useEffect(() => {
if (viewmode === "nonarchived")
getNonArchivedSQLEmployees().then(_employees =>
sortEmployeesc(_employees)
);
if (viewmode === "all")
getAllSQLEmployees().then(_employees => sortEmployeesc(_employees));
if (viewmode === "archive")
getArchiveSQLEmployees().then(_employees => sortEmployeesc(_employees));
}, [viewmode]);
//change handler for sort controls
function handleChange(event) {
const updatedSortMode = {
...sortMode,
[event.target.name]: event.target.value
};
debugger;
//sets new sort mode, then sorts the employees array and updates the state of the employee object array
setSortMode(updatedSortMode);
sortEmployees(updatedSortMode);
}