react状态数组对象在render（）方法中不可访问

Question

Hi i have this wierd problem in which i can access property ooPP on 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>
        );
      }
    }

Answer 1

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

You need to use setState to update state.