Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

Mysterious react native state mutation error occurring in mobile app

$
0
0

I am getting the error:Invariant failed: A state mutation was detected between dispatches, in the path 'feedReducer.quickSources.0.isSelect'

I have tried resolving this for several days and have no idea what the problem is. Specifically, the error is showing up on the following line:

dispatch(postDataAndGetMore('source',4,yesIds,noIds)).then(()=>{

Code within the reducer

const initialState = {userToken:'',quickSources: []};const feedReducer = (  state = initialState,  action: {type: String; payload: any},) => {  switch (action.type) {    case GET_QUICK_SOURCES:        return {...state, quickSources: action.payload}; default:      return state;  }};export default feedReducer;

Code within actions.ts

  // used to post ratings and retrieve more  export const postDataAndGetMore = (otype: String = 'source', batchSize: number = 4, scope: String = 'interesting', up: number[]=[], down:number[]=[]) =>  async (dispatch: Function, getState: Function) => {    try {      const accessToken = await getState().feedReducer.userToken;      const res = await apiClient.post(        `getData/${otype}?user_token=${accessToken}&batch_size=${batchSize}&unrated=1`,        {          scope: scope,          up: up,          down: down        }      );      if (res.status === 200) {        if(otype == 'source') {            dispatch({            type: GET_QUICK_SOURCES,            payload: res?.data?.articles,          });        }      } else {        console.warn('Something went wrong');      }    } catch (error) {      console.warn('ERROR in postDataAndGetMore')      console.error(error);    }  };

Code within the screen DataFeed.ts

export const DataFeed: React.FC = () => {  const {quickSources, loggedIn} = useSelector(    (state: any) => state.feedReducer,  );  const [modifiedNewsFeed, setModifiedNewsFeed] = useState([]);const dispatch: Function = useDispatch();// called by pressing a button in mobile appconst handleSubmit = () => {    let yesIds:number[] = [];    let noIds:number[] = [];    modifiedNewsFeed.forEach((row: any)=>{      if(row.isSelect)      {        yesIds.push(parseInt(row.sourceId))      }      else {        noIds.push(parseInt(row.sourceId))      }    })// this posts selection info and returns 4 new selections to vote ondispatch(postDataAndGetMore('source',4,yesIds,noIds)).then(()=>{      //let sourceCopy = Object.assign([], quickSources); //tried this too      let sourceCopy = JSON.parse(JSON.stringify(quickSources))      if(sourceCopy) {        const modifiedData = sourceCopy.map(item => {              item.isSelect = false;              item.selectedClass = styles.list;              return item;            });         setModifiedNewsFeed(modified)      }    })}}

Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>