上下文：

Question

上下文：

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

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 。

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

与记住退货顺序并使用大量,相比，有没有更好的方法来破坏具有多个退货的Custom React 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)

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 {obj1, obj2, obj3,..}

并使用

const {obj1, obj3} = useHook();

Answer 4

您可以返回一个对象而不是数组，然后使用点表示法访问所需的函数。

create-react-app

更好的方法来破坏具有多个退货的Custom React Hooks？

上下文：

实际示例：

问题：

4 个答案:

更新