如何在 React Native 中访问、更新和保存数组索引？

Posted 2023-02-22

【中文标题】如何在 React Native 中访问、更新和保存数组索引？

【英文标题】：How to access, update and save array index in React Native?

【发布时间】：2020-08-31 11:51:57

【问题描述】：

我正在使用两个数组 present_count 和 total_count。

present_count[0] 将存储第一个主题的计数（第一个主题单击蓝色按钮的次数），present_count[1] 将存储下一个主题的计数，依此类推。

total_count[0] 将存储第一个主题的计数（第一个主题的蓝色/红色按钮被单击的次数），total_count[1] 将存储下一个主题的数量，依此类推。

present_count[i] 将出现在斜线符号的 LHS 上，total_count[i] 将出现在斜线符号的 RHS 上。

state = 
    subjects: [],
    text: "",
    present_count: [],
    total_count: [],


present = i => 
    this.setState(
      present_count: this.state.present_count[i] + 1,
      total_count: this.state.total_count[i] + 1
    );
    AsyncStorage.setItem('PRESENT_COUNT', this.state.present_count[i].toString());
    AsyncStorage.setItem('TOTAL_COUNT', this.state.total_count[i].toString());
;

total = i => 
    this.setState(
      total_count: this.state.total_count[i] + 1,
    );
    AsyncStorage.setItem('TOTAL_COUNT', this.state.total_count[i].toString());
;

componentDidMount() 
    AsyncStorage.getItem('PRESENT_COUNT').then((value) => 
      this.setState( present_count: parseInt(value) );
    );
    AsyncStorage.getItem('TOTAL_COUNT').then((value) => 
      this.setState( total_count: parseInt(value) );
    );


render() 
    let tick = "\u2713", cross = "\u2573";
    return (
      <View style=[styles.container,  paddingBottom: this.state.viewPadding ]>
        <FlatList style=styles.list
          data=this.state.subjects
          renderItem=(item, index ) => 
            return (
              <View>
                <View style=styles.listItemCont>
                  <Text style=styles.listItem>  item.text  </Text>
                  <View style=styles.buttonContainer>
                    <Text style=styles.listItem>
                          this.state.present_count[index] / this.state.total_count[index]
                    </Text>
                    <View style=styles.button>
                      <Button title=tick onPress=() => this.present(index) color="blue" />
                    </View>
                    <View style=styles.button>
                      <Button title=cross onPress=() => this.total(index) color="red" />
                    </View>
                  </View>
                </View>
                <View style=styles.hr />
              </View>
            )
          
          keyExtractor= (item, index) => index.toString()
        />
      </View>
    );
  

【参考方案1】：

问题不是真的关于FlatList，还有其他问题。其中之一是在反应中修改数组状态。要修改索引处的值，请执行

let present_count = [...this.state.present_count];  // shallow copy to avoid mutation
present_count[i]++;  // increment
this.setState( present_count );  // update state

如果要将数组作为单个整数存储在 AsyncStorage 中，请为每个整数使用唯一键。注意+i

AsyncStorage.setItem('PRESENT_COUNT'+i, this.state.present_count[i]);

否则，如果您想要将整个数组保存到 AsyncStorage，请执行此操作。

AsyncStorage.setItem('PRESENT_COUNT', JSON.stringify(this.state.present_count));
AsyncStorage.getItem('PRESENT_COUNT').then((value) => 
    this.setState( present_count: JSON.parse(value) );
);

你必须决定present_count是一个数组还是一个整数。

state = 
    present_count: [],  // it is an array
...
componentDidMount() 
    AsyncStorage.getItem('PRESENT_COUNT').then((value) => 
      this.setState( present_count: parseInt(value) );  // you are parsing it as an integer
    );

如果要存储许多整数，请查看multiget 以将多个键加载到componentDidmount 中的present_count 数组中。否则只需使用 JSON.parse(value) 获取并解析整个数组。

---

编辑：这是一个有效的Expo Snack 来说明它。

<div data-snack-id="iQlK1UHAj" data-snack-platform="web" data-snack-preview="true" data-snack-theme="light" style="overflow:hidden;background:#fafafa;border:1px solid rgba(0,0,0,.08);border-radius:4px;height:505px;width:100%"></div>
<script async src="https://snack.expo.io/embed.js"></script>

【讨论】：

上面写着TypeError: Attempted to assign to readonly property.

它在哪里说，同时做什么？您可能正在尝试分配给不存在的属性。没有看到就很难说。你能链接到修改后的代码吗？

编辑（世博小吃）效果很好。正是我想要的样子。非常感谢人！你是救世主！

另外，从行号中删除 this.state.。您的 Expo Snack 的 23 和 24 以便当用户重新打开应用程序时，会显示增加的值。