上下文返回未定义

Question

我有一个包含数组的上下文，这个上下文有一个函数可以更新该数组中的某个值：

import React, { createContext, useState } from 'react'

export const SliderValueContext = createContext()

export function SliderValueProvider({ children }) {

    const [intensity, setIntensity] = useState([
        {
            EXAMPLE0: 0,
        },
        {
            EXAMPLE1: 0,
        },
        {
            EXAMPLE2: 0,
        },
    ])

    const updateCertainIntensity = (value, index) => {

        console.log('Index: ' + index)
        console.log('Value: ' + value)
        let newIntensity = [...intensity]
        newIntensity[index] = value

        setIntensity(newIntensity)
    }

    return (

        <SliderValueContext.Provider
        
            value={{intensity, updateCertainIntensity}}>

            {children}

        </SliderValueContext.Provider>
    )
}

我的两个屏幕都有一个基本的 StackNavigator：

import React from 'react'

import { createStackNavigator } from '@react-navigation/stack'

import Index from './index'

import SliderScreen from './screen'

const Stack = createStackNavigator()

export default function MyStack() {

    return (

        <Stack.Navigator>

            <Stack.Screen name='Index' component={Index}/>
            <Stack.Screen name='SliderScreen' component={SliderScreen}/>

        </Stack.Navigator>
    )
}

这是我的索引的样子：

import React from 'react'

import {

    Button

} from 'react-native'

import { useNavigation } from '@react-navigation/native'

import { SliderValueProvider } from './context'

export default function Index() {

    const navigation = useNavigation()

    return (

        <SliderValueProvider>

            <Button title='YOU' onPress={() => navigation.navigate('SliderScreen')}></Button>

        </SliderValueProvider>
    )
}

App.js

export default function App() {

  return (

            <NavigationContainer>

              <MyStack>


              </MyStack>

            </NavigationContainer>

  )
}

自定义滑块组件：

export default function SliderGroup({ id, text, borderColor }) {

    const { updateCertainIntensity } = useContext(SliderValueContext)

    return (

        <View style={[styles.slider_container, { borderColor: borderColor }]}>

            <View style={styles.slider_container_text}>

                <Text style={styles.text_style}> {text} </Text>

                {/* <Text style={styles.number_style}>  </Text> */}

            </View>

            <View style={styles.slider_container_slider}>

                <Slider

                    onValueChange={(value) => updateCertainIntensity(value, id)}
                    step={1}
                    minimumValue={0}
                    maximumValue={5}
                    maximumTrackTintColor='rgb(255, 255, 255)'
                />

            </View>

        </View>
    )
}

问题：每当我尝试访问我的自定义 Slider 组件中的 useContext 时，它都会说上下文未定义 undefined is not an object (evaluating useContext.updateCertainIntensity)。然而，其他上下文工作得很好，但它们没有使用对象，只是简单字符串。和在useState()中使用对象有关系吗？

Answer 1

您没有将您的应用包装在您刚创建的上下文中。

在你的App.jsx

<NavigationContainer>
    <SliderValueProvider> {/* this one is going to feed its children with data */}
        <MyStack /> {/* this will be fed by the parent component */}
    </SliderValueProvider>
</NavigationContainer>

上下文返回未定义

Context returning undefined

android

react-native

react-hooks