React native and redux: Updating state with setState is not possible during an ongoing state transition

Question

React native and redux: Updating state with setState is not possible during an ongoing state transition

Currently in the process of developing an app utilizing React Native and redux, alongside Express js for handling Ajax requests.

Encountering an issue where the data from my Ajax request fails to load, accompanied by the following warning:

Warning: setState(...): Cannot update during an existing state transition (such as within render or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to componentWillMount.

Puzzled about what might be causing this error?

index.ios.js

Developed using React Native to create an android application that showcases various functionalities neatly put together.

store.js

Incorporated different reducers and middleware into the store configuration for optimized state management and data flow.

Displaying the view file:

Utilized React components to build an interactive user interface that communicates with Redux for smooth data handling.

Action file:

Defined actions and async functions for fetching data through Ajax calls, ensuring seamless integration between front-end and back-end operations.

Reducer setup:

Implemented reducers to handle dispatched actions and manage state updates based on received data from fetch requests.

javascript express react-native react-redux setstate

Answer 1

Answer №1

Consider trying out this code snippet. It hasn't been tested extensively, but it captures the main idea:

import React, {Component} from 'react'
import {
  View,
  ListView,
  ScrollView,
  StyleSheet,
  Image,
  TouchableHighlight
} from 'react-native'

import { connect } from 'react-redux'
import Listings from './listings'
import BetView from './bet-view'
import { getListings } from './actions/listings'

const getDataSource = (listings) =>
  (new ListView.DataSource({
    rowHasChanged: (r1, r2) => r1 != r2
  })).cloneWithRows(listings)

class _ListingsView extends Component {


  componentWillMount() {
    this.props.onLoad();
  }

  render() {
    return(
      <ScrollView>
        <ListView
          dataSource={this.props.dataSource}
          renderRow={(row) =>
            <Listings
              teamOne={row.game[0]}
              teamTwo={row.game[1]}
              date={row.date}
              onPress={() => this.props.onPress(this.props.navigator, row.name)}
            />
          }
        />
      </ScrollView>
    )
  }
}

const ListingsView = connect(
  (state) => {
    return {
      dataSource: getDataSource(state.listings.items || []),
      loading: state.listings.loading
    }
  },
  (dispatch) => {
    return {
      onPress: (navigator, name) =>
        navigator.push({
          title: 'test',
          component: BetView,
          passProps: {
            category: name
          }
        }),
      onLoad: () => dispatch(getListings())
    }
  }
)(_ListingsView)

export default ListingsView

For more guidance, you may want to refer to the react-native documentation on ListViews: https://facebook.github.io/react-native/docs/listview.html

Alternatively, here's how I handle ListViews in my current application: https://github.com/kamiranoff/mythology/blob/master/src/components/HeroesList/HeroesList.js (In this example, there's some advanced pre-render data fetching involved, so the datasource state update is managed in componentWillReceiveProps )

Answer 2

Consider trying out this code snippet. It hasn't been tested extensively, but it captures the main idea:

import React, {Component} from 'react'
import {
  View,
  ListView,
  ScrollView,
  StyleSheet,
  Image,
  TouchableHighlight
} from 'react-native'

import { connect } from 'react-redux'
import Listings from './listings'
import BetView from './bet-view'
import { getListings } from './actions/listings'

const getDataSource = (listings) =>
  (new ListView.DataSource({
    rowHasChanged: (r1, r2) => r1 != r2
  })).cloneWithRows(listings)

class _ListingsView extends Component {


  componentWillMount() {
    this.props.onLoad();
  }

  render() {
    return(
      <ScrollView>
        <ListView
          dataSource={this.props.dataSource}
          renderRow={(row) =>
            <Listings
              teamOne={row.game[0]}
              teamTwo={row.game[1]}
              date={row.date}
              onPress={() => this.props.onPress(this.props.navigator, row.name)}
            />
          }
        />
      </ScrollView>
    )
  }
}

const ListingsView = connect(
  (state) => {
    return {
      dataSource: getDataSource(state.listings.items || []),
      loading: state.listings.loading
    }
  },
  (dispatch) => {
    return {
      onPress: (navigator, name) =>
        navigator.push({
          title: 'test',
          component: BetView,
          passProps: {
            category: name
          }
        }),
      onLoad: () => dispatch(getListings())
    }
  }
)(_ListingsView)

export default ListingsView

For more guidance, you may want to refer to the react-native documentation on ListViews: https://facebook.github.io/react-native/docs/listview.html

Alternatively, here's how I handle ListViews in my current application: https://github.com/kamiranoff/mythology/blob/master/src/components/HeroesList/HeroesList.js (In this example, there's some advanced pre-render data fetching involved, so the datasource state update is managed in componentWillReceiveProps )

React native and redux: Updating state with setState is not possible during an ongoing state transition

Answer №1

Similar questions

Switching from a Promise to an Observable using React-Redux and TypeScript

Determine whether the product is present, and if it is, verify whether the user is included in the array of objects

Trouble triggering hidden radio button in Angular 9 when clicked

I am curious about the inner workings of the `createApplication()` function in the ExpressJS source code. Can you shed some light on

Transmit information from JavaScript to a servlet and receive a response in return

What are some ways to implement dangerouslySetInnerHTML in conjunction with read-more-react from npm?

Is it possible to transform an array of objects into a new array of objects?

Divergent functionality of regular expressions in Internet Explorer and Chrome when handling white spaces

Change the background color of a particular row in a table using Vue.js to be red

Issues arise when trying to render a component in React after importing the react-bootstrap library

The React Fabric TextField feature switches to a read-only mode once the value property is included

Adjust the Appearance of Highcharts Legend Post-Rendering

"How to set the header in AngularJS when opening a new window with a GET request URL

Exploring the use of Rails and jQuery to automatically update data through the use of setTimeout and ajax calls

Tips for linking my TypeScript document to the server

Synchronization issue between Material UI SelectField component and state is observed in React/Redux setup

Setting an Element's attribute is only visible in the console

Tips for increasing the height of a popover when clicked

Importing a JavaScript file into another JavaScript file

How to include images in a PDF using jspdf without encountering issues with Adobe Reader?