react state array object is not accessible in render() method

Question

Hi i have this wierd problem in which i can access property ooPPon state object but can not access property data of state objects. the only difference is how they are populated.

state.ooPP is hardcoded
state.data is set after calling few functions .

i can see value of state.data as array with one element in react native dev tools but why is this.state.data null in render()?

here is the code:

   export default class HomeScreen extends Component {

      _retrieveData = async key => {
        try {
          const value = await AsyncStorage.getItem(key);
          if (value !== null) {
            // We have data!!
            console.log("yay....", value);
            return value;
          }
        } catch (error) {
          // Error retrieving data
        }
      };

      getAllKeys = async () => {
        let keys = [];
        try {
          keys = await AsyncStorage.getAllKeys();
        } catch (e) {
          // read key error
        }

        return keys;
      };



      constructor(props) {
        super(props);

        this.state = {
          data:[],
          kk:'oo',
          ooPP:[{'username':'uuuuu'}]
        }

        this.getAllKeys().then(keys => {
          var promises = keys.map(key => {
            return this._retrieveData(key)
              .then(value => {
                console.log(value, "xx");
                return JSON.parse(value);
              })
              .catch(error => {
//
              });
          });

          Promise.all(promises)
            .then(results => {
              this.state.data=results
            })
            .catch(e => {
//
            });
        });
      }



      renderSeparator = () => {
        return (
          <View
            style={{
              height: 1,
              backgroundColor: "#CED0CE"
            }}
          />
        );
      };

      render = () => {
        return (
          <View>
            <FlatList
              data={this.state.data} //-------> this is not accessible
              ItemSeparatorComponent={this.renderSeparator}
              renderItem={({ item }) => (
                <TOTPItem value={item.username} time={(20 / 30) * 100} />
              )}
            />
            <Text>dd {this.state.kk}</Text>
          </View>
        );
      }
    }

If you don't use setState like you're supposed to, React isn't going to re-render the component. You're still changing this.state obviously, because React is just JavaScript, but if you insist on ignoring the docs, don't expect React to behave as expected. — user5734311
– user5734311, Commented Jun 27, 2019 at 21:09
@ChrisG i am not ignoring the docs. i started react native/react learning today.also i am a backend dev so i just missed it. anyways thannks for help its working now :) — anekix
– anekix, Commented Jun 27, 2019 at 21:13
I was responding to i am updating state in constructor so setState() is not the correct way but I see now where the confusion was coming from :) — user5734311
– user5734311, Commented Jun 27, 2019 at 22:34

Amey Zulkanthiwar · Accepted Answer · 2019-06-27 21:10:26Z

3

Promise.all(promises)
  .then(results => {              
    this.setState({data: results});
  })
  .catch(e => {
    //
  });
});

You need to use setState to update state.

edited Jun 27, 2019 at 21:10

user5734311

answered Jun 27, 2019 at 21:05

Amey Zulkanthiwar

851 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

anekix Over a year ago

i am updating state in constructor so setState() is not the correct way. also if state is not updated then how is it visible in dev tools?

anekix Over a year ago

holy cow! thanks. this is working. i had been scratching my head for entire day before giving up on this.

Amey Zulkanthiwar Over a year ago

In constructor, we just initialize the state variable. we do not update there. Use ComponentDidMount() to update state.

Garrett Motzner Over a year ago

Of note: setState is an async action, so after it returns, the state is not guaranteed to have changed yet. If you need to wait on the state to change, then pass a callback to setState. This would be especially important if you were to continue chaining promises after setState...

Collectives™ on Stack Overflow

react state array object is not accessible in render() method

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related