为什么 useEffect 不对依赖项做出反应？答案

【问题标题】：Why useEffect don't react to dependencies?为什么 useEffect 不对依赖项做出反应？
【发布时间】：2020-09-05 13:56:29
【问题描述】：

我的 react 应用遇到了难以理解的问题。从 API 获取数组并将其呈现为表格。在渲染之前，数组必须进入两个函数——排序和分页。实际上表运行良好，但行为奇怪。排序函数不会对依赖项做出反应，并且在第一次渲染时我得到空数组，在从 API 获取数组后，这个函数必须调用新的渲染，但它不会发生。 P\S：分页在第一次渲染时工作，只有排序函数有问题

App.js

 const [items, setItems] = useState([]);
    const [isLoaded, setIsLoaded] = useState(false);
    const {setMask, setCurrentColumn, setCurrentCondition, sortedItems} = useSort(items);
    const {setCurrentPage, currentItems, amountOfPages} = usePagination(sortedItems);

排序功能

const [sortedItems, setSortedItems] = useState([]);
    const [mask, setMask] = useState("");
    const [currentColumn, setCurrentColumn] = useState("");
    const [currentCondition, setCurrentCondition] = useState("");
    console.log(items);
    useEffect(() => {
        SortQuantity(currentCondition, currentColumn);
        SortDistance(currentCondition, currentColumn);
        SortName(currentCondition, currentColumn);

    }, [currentCondition, currentColumn, mask, items]);

    function SortQuantity(currentCondition, currentColumn) {
        if (currentColumn === "Quantity" && currentCondition === "less") {
            console.log(mask, currentCondition, currentColumn);
            setSortedItems(
                items.filter(item => item.Quantity < mask)
            )
        } else if (currentColumn === "Quantity" && currentCondition === "greater") {
            console.log(mask, currentCondition, currentColumn);
            setSortedItems(
                items.filter(item => item.Quantity > mask)
            )
        } else if (currentColumn === "Quantity" && currentCondition === "equal") {
            console.log(mask, currentCondition, currentColumn);
            setSortedItems(
                items.filter(item => item.Quantity.toString() === mask)
            )
        } else return items
    }

    function SortDistance(currentCondition, currentColumn) {
        if (currentColumn === "Distance" && currentCondition === "less") {
            console.log(mask, currentCondition, currentColumn);
            setSortedItems(
                items.filter(item => item.Distance < mask)
            )
        } else if (currentColumn === "Distance" && currentCondition === "greater") {
            console.log(mask, currentCondition, currentColumn);
            setSortedItems(
                items.filter(item => item.Distance > mask)
            )
        } else if (currentColumn === "Distance" && currentCondition === "equal") {
            console.log(mask, currentCondition, currentColumn);
            setSortedItems(
                items.filter(item => item.Distance.toString() === mask)
            )
        } else return items
    }

    function SortName(currentCondition, currentColumn) {
        if (currentColumn === "Name" && currentCondition === "contains") {
            console.log(mask, currentCondition, currentColumn);
            setSortedItems(
                items.filter(item =>
                    item.Name.toLowerCase().includes(mask.toLowerCase())
                )
            )
        } else return items
    }

    return {
        setMask,
        setCurrentColumn,
        setCurrentCondition,
        sortedItems
    }
};

【问题讨论】：

标签： javascript reactjs react-hooks

【解决方案1】：

我解决了第一次渲染的问题，但这不是问题的答案。我添加了 setSortedItems 来获取。

App.js

async function FetchData() {
            try {
                const response = await fetch('http://localhost:4000/items');
                const json = await response.json();
                setItems(json);
                setIsLoaded(true);
                setSortedItems(json);
                console.log(json);
            } catch (e) {
                console.log(e)
            }
        };

【讨论】：