React Context API;是否可以从同级挂钩访问更新的上下文

时间:2020-10-19 23:13:53

标签: reactjs react-native async-await react-hooks react-context

按钮调用函数signAllBrowsed,其中包含其他两个函数:

  • loadSafetyLetters是一个挂钩,它使数据库对某些数据进行调用并将其设置为上下文
  • signAll是一个钩子,试图在上下文中访问数据以对其进行处理

上下文已正确设置,但是当signAll访问它时,数据不会更新。有没有一种方法可以访问更新的上下文,而无需直接将其传递给第二个函数?还是有一种方法可以在上下文更新并可以访问后调用回调?似乎更新的上下文仅在重新渲染后才可用。

包含signAllBrowsed的组件和2个钩子是同级的。

enter image description here

上图中的

代码:

hutber@hutber:/var/www/unsal.co.uk$ amplify mock

GraphQL schema compiled successfully.

Edit your schema at /var/www/unsal.co.uk/amplify/backend/api/unsalcouk/schema.graphql or place .graphql files in a directory at /var/www/unsal.co.uk/amplify/backend/api/unsalcouk/schema
Failed to start API Mock endpoint InternalFailure

loadSafetyLetters调用loadLetters挂钩:

        setModalVisible(true)
        const logHeader = 'SafetyLetterHome::SignAllBrowsed'
        try {
            const response = await loadSafetyLetters(false) // before beginning sign all, get a fresh list of letters from db
            if (Configs.SHOW_REQUEST_LOGS) console.log(`${logHeader} response`, response)
            if (response === 'no api error') {
                await signAll()
                navigation.navigate('SafetyLetterSign')
            }
        } catch (error) {
            const errorMessage = error.status && error.status.message ? error.status.message : error
            Alert.alert('Database Error', errorMessage)
            console.log(`${logHeader}`, errorMessage)
        }
    }

signAll钩子:

    const [getLetters] = useGetLetters()
    const [sortLetters] = useSortLetters()
    const [hasAPIError] = useHasAPIError()
    const navigation = useNavigation()
    const { setModalVisible, setShowSignAll, setSortedLetters, setUnsortedLetters } = useContext(SafetyContext)

    const loadLetters = async (sort = true) => {
        try {
            const response = await getLetters()
            const logHeader = 'SafetyHome::loadLetters'
            const errorMessage = 'The following error occurred when trying to load letters:'
            if (Configs.SHOW_REQUEST_LOGS) console.log(`${logHeader} response`, response)

            const error = hasAPIError(response, logHeader, errorMessage)
            if (error) return error

            const { data } = response.data.payload
            let unsortedLetters = []
            if (data !== null && data.length > 0) {
                data.map((item) => {
                    // grab only unsigned letters
                    if (
                        item.assignmentStatus === SafetySources.PENDING ||
                        item.assignmentStatus === SafetySources.BROWSED ||
                        item.assignmentStatus === SafetySources.QUESTIONS_COMPLETE
                    ) {
                        unsortedLetters.push({
                            safetyLetterId: item.safetyLetterId,
                            title: item.title,
                            assignmentStatus: item.assignmentStatus,
                            filePath: item.filePath,
                            embeddableToken: item.embeddableToken,
                            sponsorId: item.sponsorId,
                            letterDate: item.letterDate,
                            form16: item.form16Enabled === '1' ? true : false,
                            sponsorName: item.sponsorName,
                            type: item.letterType,
                            sortOrder: item.sortOrder,      // dear doctor; sortOrder === 1
                        })
                    }
                })
            }
            if (unsortedLetters.length > 0) {



                let bletters = unsortedLetters.filter((letter) => letter.assignmentStatus === SafetySources.BROWSED || letter.assignmentStatus === SafetySources.QUESTIONS_COMPLETE)
                console.log('useLoadLetters; setting fresh pull of letters in context, including ', bletters.length, ' browsed letters')



                setUnsortedLetters(unsortedLetters)     // set in context
                setShowSignAll(                             // show/hide sign all button
                    unsortedLetters.some((letter) =>
                        letter.assignmentStatus === SafetySources.BROWSED ||
                        letter.assignmentStatus === SafetySources.QUESTIONS_COMPLETE,
                    ))
            }

            if (sort) {
                if (unsortedLetters.length > 0) {
                    let sortedLetters = sortLetters(unsortedLetters) // sort letters with hook
                    setSortedLetters(sortedLetters) // set in context
                }
            }
        } catch (error) {
            console.log('SafetyHome::loadLetters ', error)
            const errorMessage = error.status && error.status.message ? error.status.message : error
            Alert.alert(
                'Error Loading Letters',
                `A database error has occurred. Please try again. (${errorMessage})`,
            )
            navigation.navigate('Home')
        } finally {
            setModalVisible(false)
        }
    }

    return [loadLetters]
}

0 个答案:

没有答案