javascript - 使用多个返回来破坏自定义 React Hooks 的更好方法？

Question

语境：

我看到了 react hooks 的文档，所有的 hooks 返回两个在数组中被破坏的值。但是如果我有一个钩子返回一个多于两个的数组，像这样：

const [value, someMethod, someMethod2, someMethod3, someMethod4] = useSomeMethod(someValue)

但我只想要一些方法，而不是全部。在这种情况下，我将需要执行以下操作：

const [value, , , someMethod3, someMethod4] = useSomeMethod(someValue)

这样，它看起来并没有那么糟糕，但想象一下，如果你有一个返回超过 10 的钩子。我将展示一个真实的例子，以便更清楚。

真实例子：

我正在创建一个处理数组的钩子，所以它会是这样的：

const useArray = (initialState) => {

    const [array, setArray] = useState(initialState)

    const add = (value) => {
        let newArray = [...array, value]
        setArray(newArray)
    }

    const deleteByIndex = (index) => {
        let newArray = array.filter((x, i) => i != index)
        setArray(newArray)
    }

    const updateByIndex = (value, index) => {
        let newArray = [...array]
        newArray[index] = value
        setArray(newArray)
    }

    return [array, add, deleteByIndex, updateByIndex]
}

并使用这个钩子，就像：

const [bananas, addBananas, deleteBananasByIndex, updateBananasByIndex] = useArray(someBananas)

但是如果你对数组操作有一点了解的话，方法远不止3种，可能不止10种。

我想做的是为数组创建一个钩子，它可以处理数组的所有类型的操作，并在我的项目中的任何地方使用它。

问题：

当我要使用这个钩子时问题就来了，因为当我调用钩子时不会使用所有方法，但所有方法都会在项目中使用。并且仅使用其中一些方法，它会是这样的：

const [value, oneMethod, , , someMethod, , otherMethod, , moreMethod] = useSomeMethod(someValue)

我认为这很糟糕，因为我需要记住其他方法并且使用很多,看起来并不好。

我想将它解构为一个对象，但是名称将是固定的，而且我将无法useArray在组件中使用更多名称。

因此，考虑到所有这些...

有没有比记住返回的顺序和使用 alot of 来破坏具有多个返回的自定义 React Hooks 更好的方法,？

观察：我的问题不是关于数组，而是关于破坏反应钩子的返回

标签： javascriptreactjsreact-hooks

Answer 1

更新

正如@worc在评论中所说，useReducer是一种更好的方法，也是正确的方法，这样的情况应该使用useReducer.

此外，它是如何工作的：

function arrayReducer(array, action) {
    switch (action.type) {
        case 'push':
            return [...array, action.value]
        case 'deleteByIndex':
            let deleteByIndex = array.filter((x, i) => i != action.index)
            return deleteByIndex
        case 'updateByIndex':
            let updateByIndex = [...array]
            updateByIndex[action.index] = action.value
            return updateByIndex
        default:
            throw new Error()
    }
}

export default function useArray(initialState){
    return useReducer(arrayReducer, initialState)
}

感谢所有帮助过的人！

---

所以这样做的方法是返回一个对象并重命名所有变量

const useArray = (initialState) => {

    const [array, setArray] = useState(initialState)

    const add = (value) => {
        let newArray = [...array, value]
        setArray(newArray)
    }

    const deleteByIndex = (index) => {
        let newArray = array.filter((x, i) => i != index)
        setArray(newArray)
    }

    const updateByIndex = (value, index) => {
        let newArray = [...array]
        newArray[index] = value
        setArray(newArray)
    }

    return {array, add, deleteByIndex, updateByIndex}
}


const {
    array: bananas, 
    add: addBananas,
    deleteByIndex: deleteBananasByIndex, 
    updateByIndex: updateBananasByIndex
} = useArray(someBananas)