Блог

Главная - Вопросы по программированию - Как обновить состояние в react-native, чтобы определить, когда с помощью крючков произошло определенное событие(заданная дата прошла)?

Как обновить состояние в react-native, чтобы определить, когда с помощью крючков произошло определенное событие(заданная дата прошла)?

#reactjs #react-native #redux #react-redux #react-native-android

Вопрос:

Я использую react-native с редакцией.

Я хочу обновить состояние в моих контактах, когда их срок действия истекает, и это мой код

Именно так я обновляю состояние в App.js

 useEffect(()=>{ 
    
    setInterval(()=>{
       
       updateContacts(contacts.map(item => item.dueDate < new Date() 
          ?
          ( d=new Date(item.dueDate),
            item.payments.duration=='year'?d.setMonth(d.getMonth() 12)
          :item.payments.duration=='hyear'? d.setMonth(d.getMonth() 6)
          :item.payments.duration=='month'?d.setMonth(d.getMonth() 1)
          :d.setDate(d.getDate()  7),
          balance=item.balance-item.payments.payment,
          {
          ...item,dueDate:d,balance
          
        })
          :item)
       )
      },60000)
    },[]); 
 const mapStateToProps=(state)=>{
return{
  contacts:state.contactReducer.contacts
}
}

const mapDisptachToProps=(dispatch)=>{
  return {
  
    addContact: (contact) => dispatch(addContact(contact)),
    updateContacts: (contacts)=> dispatch(updateContacts(contacts))
  }

}


export default connect(mapStateToProps,mapDisptachToProps) (App);

Мой контакт.

 const initialState={
    contacts:
    [
        {
          id: uuid.v4(),
          name: {firstName: 'Neelanshu', lastName: 'Garg'},
          contact: {
            Mobile: '8800170377',
            Alt: '',
            email: 'neelanshugarg097@gmail.com',
          },
          payments: {
            paid: 0,
            duration: 'month',
            payment: 1000,
          },
          balance: 8800,
          date: new Date(2021, 10, 8),
          dueDate:new Date(2021,10,15),
        },
        {
          id: uuid.v4(),
          name: {firstName: 'Neel', lastName: 'Garg'},
          contact: {
            Mobile: '8800170377',
            Alt: '',
            email: 'neelanshugarg097@gmail.com',
          },
          payments: {
            paid: 0,
            duration: 'week',
            payment: 100,
          },
          balance: -100,
          date: new Date(2021, 10, 8),
          dueDate:new Date(2021,10,15),
          
        },
        {
          id: uuid.v4(),
          name: {firstName: 'shu', lastName: 'Garg'},
          contact: {
            Mobile: '8800170377',
            Alt: '',
            email: 'neelanshugarg097@gmail.com',
          },
          payments: {
            paid: 0,
            duration: 'week',
            payment: 100,
          },
          balance: 8800,
          date: new Date(2021, 10, 8),
          dueDate:new Date(2021,10,15),
          
        }
      ]
    }

    const contactReducer= (state=initialState, action)=>{
        switch(action.type)
        {
            case ADD_CONTACT:
              
                return{
                    ...state,
                    contacts:[...state.contacts,{id: uuid.v4(), ...action.data}]
                   
                };
            case DELETE_CONTACT:
                return {
                    ...state,
                    contacts:state.contacts.filter(item => item.id != action.id)
                };
            case UPDATE_CONTACTS:
              console.log(action.data)
                return {
                    ...state,
                    contacts:action.data
                }
            default:
                return state;
        }
    }


    export default contactReducer;

This is store.js

 import {createStore, combineReducers} from 'redux'
import contactReducer from './reducers/contactReducer';
import devToolsEnhancer from 'remote-redux-devtools';

const rootReducer= combineReducers({
    contactReducer: contactReducer
})

const configureStore = ( ) => createStore(rootReducer,devToolsEnhancer({realtime:true,host: 'localhost',
port: 8000
}));

export default configureStore;

Итак, проблема в том, что когда я добавляю новый контакт(через action.type== ADD_CONTACT), он некоторое время отображается в состоянии и пользовательском интерфейсе, но после обновления состояние возвращается к исходному жестко запрограммированному состоянию, и новый добавленный контакт исчезает. Я вообще не могу понять, как обновить свое состояние.

Если я удалю обновление для состояния, новый контакт останется в состоянии и будет отображаться в пользовательском интерфейсе все время. Пожалуйста, Помогите

Метки: , ,