Question

我的应用程序遇到了难以理解的麻烦。从API获取数组并将其呈现为表格。在渲染之前，数组必须进入两个函数-排序和分页。表格实际上工作良好，但行为奇怪。 Sort函数不会对依赖项做出反应，并且在第一次渲染时我会得到一个空数组，从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
    }
};

Answer 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)
            }
        };

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

1 个答案: