Блог

У меня здесь настоящий дурдом, и я не могу с этим смириться.

У меня есть этот компонент:

 <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. Поэтому, если я нажму на кнопку, она сначала предупредит об истинном, а затем о ложном и обратно, как и ожидалось. Что не меняется, так это текст, который должен находиться между «работает» и «не работает».

Этот компонент определенно входит в сферу деятельности моего Провайдера. Я использую useContext , чтобы получить доступ к myContext .

Кто-нибудь знает, почему это может произойти?

Здесь следует отметить, что простое изменение myContext.value = false or true не вызовет повторной визуализации.

Я не уверен, как вы справляетесь с value изменениями, но я создал точную копию того, что вы хотите

Ознакомьтесь с этой закуской, чтобы увидеть рабочий пример.

Создайте контекст, как показано ниже

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