javascript - 销毁具有多个返回值的 Custom React Hooks 的更好方法？

Question

上下文:

我看到了 react hooks 的文档，所有的 hooks 都返回两个在数组中被破坏的值。 但是，如果我有一个钩子(Hook)返回一个包含两个以上的数组，就像这样:

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

但是我只想要一些方法，而不是全部。在这种情况下，我需要做类似的事情:

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

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

真实例子:

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

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]
}

要使用这个钩子(Hook)，它会是这样的:

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

但是如果你懂一点数组操作的话，方法远不止3种，可能超过10种。

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

问题:

当我要使用这个hooks的时候问题就来了，因为我调用hook的时候不会用到所有的方法，但是在项目中会用到所有的方法。如果只使用其中的一些方法，它会是这样的:

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

我认为这非常糟糕因为我需要记住其他方法并且使用大量, 看起来不太好。

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

所以，考虑到所有这些......

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

观察:我的问题不是关于数组，而是关于破坏 react hook 的返回

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)