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

Posted 2023-05-06

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

【英文标题】：Context is not updating text in React Native after state change

【发布时间】：2021-11-23 09:53:06

【问题描述】：

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

我有这个组件：

<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。

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

【参考方案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>
  );

【讨论】：

是的，这正是我正在做的。我知道它正在更新值，因为当我单击它时，警报会从真到假来回变化，它只是没有更新“工作”和“不工作”之间的文本，你可以在我的文本组件中看到它。您知道为什么会发生这种情况吗？

看看我在答案中提供的小吃。您会看到文字发生了变化

当然，我明白了，但在我的项目中并没有改变。你知道会导致这种行为的任何事情吗？这是一个相当大的代码库

你用这个myContext.value = false还是这个myContext.setValue(false)？