Question

我尝试使用具有multiGet属性的AsyncStorage构建react-native应用程序。我可以成功地将内容添加到存储中，甚至可以将其显示在调试器console.log中，但是当我要遍历数据数组时，它始终不显示任何结果。有人知道问题出在哪里吗？

 componentDidMount() {
    this._getAllData();
  }

  _getAllData = async () => {
    try {
      const data = [];
      const keys = await AsyncStorage.getAllKeys();
      const items = await AsyncStorage.multiGet(keys, (err, stores) => {
        stores.map((result, i, store) => {
          // let key = store[i][0];
          let value = store[i][1];
          let parsedValue = JSON.parse(value);
          data.push(parsedValue);
        });

        this.setState({ data });
      });
    } catch (error) {
      this.setState({ error });
    }
  };


 _displayAllData = () => {
    // console.log(this.state.data.length);
    // console.log(this.state.data);

    this.state.data.length &&
    this.state.data.map(el => {

      return (
        <View>
          <Text>{el.name}</Text>
          <Text>{el.street}</Text>
          <Text>{el.postalCode}</Text>
          <Text>{el.city}</Text>
          <Text>{el.phone}</Text>
          <Text>{el.email}</Text>
          <Text>{el.nip}</Text>
        </View>
      );
    });
  };

然后在渲染内容时我尝试

        {this._displayAllData()}

Answer 1

当前，您的_displayAllData方法未返回任何内容。您需要返回地图结果，以使您的方法返回一些JSX。

 _displayAllData = () => {


    // console.log(this.state.data.length);
    // console.log(this.state.data);

    return this.state.data.length &&
    this.state.data.map(el => {

      return (
        <View>
          <Text>{el.name}</Text>
          <Text>{el.street}</Text>
          <Text>{el.postalCode}</Text>
          <Text>{el.city}</Text>
          <Text>{el.phone}</Text>
          <Text>{el.email}</Text>
          <Text>{el.nip}</Text>
        </View>
      );
    });
  };

无法通过AsyncStorage数据进行映射

1 个答案: