javascript - 在 render() 方法中无法访问 react 状态数组对象

Question

嗨，我遇到了一个奇怪的问题，我可以访问状态对象的属性ooPP，但无法访问状态对象的属性data。唯一的区别在于它们的填充方式。

• state.ooPP 已硬编码
• state.data 在调用几个函数后设置。

我可以在react Native dev tools中将state.data的值视为包含一个元素的数组，但为什么是this.state.data render() 中为 null？

这是代码:

   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 => {
    //
  });
});

您需要使用setState来更新状态。