使用多个 returns 破坏自定义 React Hooks 的更好方法？

Question

上下文：

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

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

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

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

这样，看起来还不错，但是想象一下，如果您有一个 return 超过 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种。

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

问题：

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

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

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

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

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

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

Observations：我的问题不是关于数组，而是关于破坏反应钩子的return

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)

Answer 2

您可以对函数的返回值使用过滤器并取所需的唯一值并解构（如果您不能更改数据结构）

const [value, oneMethod, someMethod, otherMethod, moreMethod] = useSomeMethod(someValue).filter((_,index)=> select desired index only)

如果您可以更改结构，只需使用 object 而不是解构

const { foo: bar } = { foo: 7 , xyz: some value}

Answer 3

您可以return一个对象而不是数组

所以，

 return {obj1, obj2, obj3,..}

并使用

const {obj1, obj3} = useHook();

Answer 4

您可以return一个对象而不是一个数组，然后使用点符号来访问所需的函数。

        export function useCustomHook(data) {
        const dispatch = useDispatch();
        
    
        const Notify = (data) => {
            return dispatch(openNotifyModal({ show: true, title: data.title, message: data.message }))
        }
        
        const OpenLogin = () => {
            return dispatch(openLoginModal());
        }
    
        const OpenLoader = () => {
            return dispatch(openLoaderModal());
        }
    
        const CloseLoader = () => {
            return dispatch(closeLoaderModal());
        }
    
        return {Notify, OpenLoader, CloseLoader, OpenLogin};
    
    }
    
// in your main component import useCustomHook
    let customHook = useCustomHook();
    
    const myFunc = () => {
    return customHook.Notify({title:'demo title', message:'demo message'});
    }

使用多个 returns 破坏自定义 React Hooks 的更好方法？

Better aproach for destructing Custom React Hooks with multiple returns?

javascript

reactjs

react-hooks

上下文：

真实例子：

问题：

更新