React Native - 在消费者中更新上下文仅在第一次工作

Question

我正在尝试更新一个上下文，如消费者内部按钮点击中的计数器，它是第一次工作（增量 +1），但在第一次点击后，按钮似乎无法再次点击。

UserContext.js

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


export const UserContext = createContext();

const UserProvider = ({children}) => {
    
    const [context, setContext] = useState({count : 1,   update: () => {
        setContext((context) => ({
            count: context.count + 1
        }));
    }});


    return(
        <UserContext.Provider value={context}>
            {children}
        </UserContext.Provider>
    );


}

export default UserProvider;

index.js

import React, {useEffect, useState, useContext } from 'react';
import {ScrollView, Text, View , Button, StyleSheet, ActivityIndicator} from 'react-native';
import {Colors} from 'react-native/Libraries/NewAppScreen';
import { UserContext } from '../userContext.js';


export default Home = ({navigation}) => {

  return (
    <View style={styles.body}>

      <UserContext.Consumer>
      {({count, update}) => ( 
      <View>
        <Button
            onPress={update}
            title="Counter">
          </Button>
          
        <Text>{count}</Text>
      </View>
      )}
    </UserContext.Consumer>
    
    </View>

  );
};

Answer 1

如何定义和使用上下文

const UserProvider = ({children}) => {
    
    const [context, setContext] = useState(1)   

    //create a update function that setContext
    const update = () => {
       setContext(prev => prev+1);
    }


    return(
        <UserContext.Provider value={{ context, update }}>
            {children}
        </UserContext.Provider>
    );


}

在您的 index.js

中

export default Home = ({navigation}) => {

  return (
    { /* wrap your app in the provider */}
    <UserProvider>
         <App />
    </UserProvider>

  );
};


//App Component
const App = () => {

     const { context, update } = useContext(UserContext)
     return (<View>
              <Button onPress={update} title="Counter">Add Counter</Button>
             <Text>{context}</Text>
             </View>)
}