Question

嗨，我有一个比较棘手的问题，我可以访问状态对象的属性ooPP，但不能访问状态对象的属性data。唯一的区别是它们的填充方式。

state.ooPP被硬编码
state.data是在调用少量函数后设置的。

我可以看到state.data的值是在react native dev tools中具有一个元素的数组，但是为什么this.state.data在render()中为空？

代码如下：

   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来更新状态。

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

1 个答案: