上下文返回未定义

无显示

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

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>
    )
}

应用程序.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() 中使用对象有关?

Jun De Leon

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

在你的 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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章