Собственный компонент React не рендерится после добавления контекста React - PullRequest
Новая
       88

Собственный компонент React не рендерится после добавления контекста React

0 голосов
/ 18 марта 2020

Итак, я настраиваю простое приложение Clock. Я хотел добавить функциональность добавления будильников. Поэтому я подумал, что сделаю AlarmState, в котором будут храниться значения всех сигналов тревоги и т. Д. c. Я сделал State, context, reducer for it, но когда я продолжил добавлять его в свое основное приложение. js, обернув его вокруг всего приложения, компоненты внутри него не отображаются. У меня также есть другое предупреждение: «Невозможно выполнить обновление состояния React для неустановленного компонента. Это неоперативный процесс, но он указывает на утечку памяти в вашем приложении. Чтобы исправить, отмените все подписки и асинхронные задачи в» useEffect cleanup function ". Это предупреждение не появлялось, когда компонент не имел состояния, обернутого вокруг него.

my App. js

import React from 'react';
import {View, Text, StyleSheet, PLatform} from 'react-native';
import CurrentTime from './components/CurrentTime';
import AlarmState from './context/alarm/AlarmState';

const App = () => {
  return (
    <View style={styles.container}>
      <AlarmState>
        <View>
          <CurrentTime />
        </View>
        <View>
          <Text>testing to get output</Text>
        </View>
      </AlarmState>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

export default App;

myCurrentTime 

import React, {useState, useEffect} from 'react';
import {View, Text, StyleSheet, Platform} from 'react-native';

const CurrentTime = () => {
  const [currTime, setCurrTime] = useState(null);
  const [currDay, setCurrDay] = useState(null);

  var daysArray = [
    'Sunday',
    'Monday',
    'Wednesday',
    'Thursday',
    'Friday',
    'Saturday',
  ];

  const getCurentTime = () => {
    let hour = new Date().getHours();
    let minutes = new Date().getMinutes();
    let seconds = new Date().getSeconds();

    if (minutes < 10) {
      minutes = '0' + minutes;
    }

    if (seconds < 10) {
      seconds = '0' + seconds;
    }

    setCurrTime(hour + ' : ' + minutes + ' : ' + seconds + ' ');

    daysArray.map((item, key) => {
      if (key == new Date().getDay()) {
        setCurrDay(item.toUpperCase());
      }
    });
  };

  useEffect(() => {
    setInterval(() => {
      getCurentTime();
    });
  });

  return (
    <View style={styles.box}>
      <View>
        <Text style={styles.daysText}>{currTime}</Text>
        <Text style={styles.timeText}>{currDay}</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  box: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'skyblue',
  },
  timeText: {
    fontSize: 50,
    color: '#e59400',
    flexDirection: 'column',
  },

  daysText: {
    color: '#e59400',
    fontSize: 25,
    paddingBottom: 0,
    flexDirection: 'column',
  },
});

export default CurrentTime;

Мое состояние тревоги 

import React, {useReducer} from 'react';
import alarmContext from './alarmContext';
import alarmReducer from './alarmReducer';

import {ADD_ALARM} from '../types';

const AlarmState = props => {
  const initialState = {
    alarms: [
      {
        hr: 1,
        min: 12,
      },
      {
        hr: 2,
        min: 22,
      },
    ],
  };

  const [state, dispatch] = useReducer(alarmReducer, initialState);

  const addAlarm = alarmtime => {
    dispatch({type: ADD_ALARM, payload: alarmtime});
  };

  return (
    <alarmContext.Provider
      value={{
        alarms: state.alarms,
        addAlarm,
      }}>
      {props.chlidren}
    </alarmContext.Provider>
  );
};

export default AlarmState;

Контекст тревоги 

import  {createContext} from 'react';

const alarmContext = createContext();

export default alarmContext;
...