时间戳

首页 > 解决方案 > 来自 Json 的 React-Name 数组，以变量为键

arrays - 来自 Json 的 React-Name 数组，以变量为键

问题描述

我不是 100% 确定如何问这个问题，而且我对 react-native 还很陌生。我有一个类别列表，其中包含计数。在 PHP 中，我可能会这样做：

$purchases['kayaks'] = 0;
$purchases['kayaks']++;

因此，每次出售此示例的皮划艇时，它都会增加。或者更具体地说是这样的：

$purchases[$categoryName]++;

我需要根据用户按下他们想要的类别来获取类别的名称并向其添加计数，然后将其以 json 格式存储在 AsyncStorage 中。

所以我知道我可以这样做：

{
    "categories": [
        {
            "kayaks":"0"
        }
    ]
}

如果我将其导入“产品”，我可以执行 products.categories.kayaks 来检索“0”（或任何购买计数），但我需要皮划艇能够成为基于用户所做选择的变量。所以更像 products.categories[categoryName] 的东西，或者更优化的方法是在 react-native 中。有什么方法（或者如果有比这更理想的方法）来完成这样的不同类别计数？

我希望这是有道理的。提前致谢！

标签： arraysjsonreact-native

解决方案

这是一个react-native使用 AsyncStorage 读取/写入数据和操作对象的基本示例。查看https://facebook.github.io/react-native/docs/asyncstorage了解有关AsyncStorage.

import React from 'react';
import { ActivityIndicator, AsyncStorage, StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  },
  input: {
    minWidth: 100,
    backgroundColor: 'red'
  }
});

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      data: undefined,
      categoryName: 'kayak' // default input value
    };
  }

  componentDidMount() {
    AsyncStorage.getItem('data').then(dataAsString => {
      // if the data exists lets convert it into an Object we can easily edit
      // else default to an empty object
      this.setState({ data: dataAsString !== null ? JSON.parse(dataAsString) : {} });
    });
  }

  handleIncrement = () => {
    const { data: prevData, categoryName } = this.state;

    const prevValue = prevData[categoryName];
    // if the category doesn't exist the data lets default to 0
    const newValue = prevValue !== undefined ? prevValue + 1 : 0;

    this.setState({
      data: {
        ...prevData, // keep all the previous data
        [categoryName]: newValue // but set the selected category to the new value
      }
    });
  };

  handleSave = () => {
    const { data } = this.state;

    const dataAsString = JSON.stringify(data); // convert data into a string so AsyncStorage can save it properly

    AsyncStorage.setItem('data', dataAsString); // save the data string
  };

  handleOnChangeText = categoryName => this.setState({ categoryName });

  render() {
    const { data, categoryName } = this.state;

    return (
      <View style={styles.container}>
        {data === undefined ? (
          <ActivityIndicator /> // While data is undefined (AsyncStorage is still doing getItem('data)) show a loading indicator
        ) : (
          <React.Fragment>
            <Text>{JSON.stringify(data, null, 2)}</Text>
            <TextInput style={styles.input} value={categoryName} onChangeText={this.handleOnChangeText} />
            <TouchableOpacity onPress={this.handleIncrement}>
              <Text>Add/Increment</Text>
            </TouchableOpacity>
            <TouchableOpacity onPress={this.handleSave}>
              <Text>Save</Text>
            </TouchableOpacity>
          </React.Fragment>
        )}
      </View>
    );
  }
}

export default App;

注意：最好使用对象来存储您的数据（正如 Cuong Tran Duc 提到的），因为您正在使用类别进行索引。

希望这个例子有帮助。

推荐阅读