Лучший подход для уничтожения Custom React Hooks с несколькими возвратами? - PullRequest
Новая
       13

Лучший подход для уничтожения Custom React Hooks с несколькими возвратами?

2 голосов
/ 22 марта 2019

Контекст:

Я видел документацию о реагирующих хуках, и все хуки возвращают два значения, которые уничтожены в массиве. Но что, если у меня есть ловушки, которые возвращают массив с более чем двумя, как это:

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 в компоненте .

Итак, принимая все это во внимание ...

Есть ли лучший подход для уничтожения пользовательских React Hooks с несколькими возвратами, чем запоминание порядка возвратов и использование большого числа ,?

Наблюдения : Мой вопрос не о массивах, а о том, как уничтожить возвратный крюк

Ответы [ 2 ]

0 голосов
/ 22 марта 2019

Вы можете использовать фильтр по возвращенному значению функции и взять только желаемое и деструктурировать (если вы не можете изменить структуру данных) 

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

Если вы можете изменить свою структуру, просто используйте object, а затем уничтожьте 

const { foo: bar } = { foo: 7 , xyz: some value}
0 голосов
/ 22 марта 2019

Обновление

Как сказано в комментариях 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)
...