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

Question

我正在尝试更新 Consumer 中按钮单击中的计数器之类的上下文，它是第一次工作（增量 +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>)
}

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

React Native - Update Context in Consumer only works first time

jsx

reactjs

react-native

react-context

react-hooks