状态更改后，上下文未更新 React Native 中的文本

Question

我有一个真正的笨蛋，我无法绕开它。

我有这个组件：

<TouchableOpacity
  onPress={() => {
    if (myContext.value) {
      alert('true');
      //changes myContext.value to false
    } else {
      alert('false');
      //changes myContext.value to true
    }
  }}>
  <Text>{myContext.value ? 'working' : 'not working'}</Text>
</TouchableOpacity>

我不明白的奇怪之处在于上下文正在改变 onPress 函数。因此，如果我单击该按钮，它首先会提示 true，然后按预期来回提示 false。没有改变的是应该介于“工作”和“不工作”之间的文本。

这个组件肯定在我的Provider的范围内。我正在使用useContext 访问myContext。

有人知道为什么会这样吗？

Answer 1

这里要注意的一点是，仅仅改变myContext.value = false or true不会触发重新渲染。

我不确定您如何处理 value 更改，但我已经创建了您想要的副本

查看thisSnack 以查看工作示例。

如下图所示创建上下文

import { createContext } from 'react';

const MyContext = createContext();

export default MyContext;

App.js 组件示例如下所示

import * as React from 'react';
import { Text, View, TouchableOpacity } from 'react-native';

import Constants from 'expo-constants';
import MyContext from './MyContext';

import MyComponent from './MyComponent';

export default function App() {
  const [value, setValue] = React.useState(true);

  return (
    <MyContext.Provider value={{ value, setValue }}>
      <MyComponent />
    </MyContext.Provider>
  );
}

您要执行此操作的组件应如下所示

import * as React from 'react';
import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
import Constants from 'expo-constants';
import MyContext from './MyContext';

export default function MyComponent() {
  const myContext = React.useContext(MyContext);

  return (
    <TouchableOpacity
      onPress={() => {
        if (myContext.value) {
          alert('true');
          myContext.setValue(false);
          //changes myContext.value to false
        } else {
          alert('false');
          myContext.setValue(true);
          //changes myContext.value to true
        }
      }}>
      <Text>{myContext.value ? 'working' : 'not working'}</Text>
    </TouchableOpacity>
  );
}