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

Javascript 如何在React Native中访问、更新和保存数组索引?,javascript,arrays,reactjs,react-native,setstate,Javascript,Arrays,Reactjs,React Native,Setstate,我使用两个数组present\u count和total\u count 显示计数[0]将存储第一个主题的计数第一个主题单击蓝色按钮的次数,显示计数[1]将存储下一个主题的计数,依此类推 total_count[0]将存储第一个主题的计数第一个主题单击蓝色/红色按钮的次数,total_count[1]将存储下一个主题的次数,依此类推 当前_计数[i]将出现在斜杠符号的左侧,总_计数[i]将出现在斜杠符号的右侧 问题并不是关于平面列表,还有其他问题。其中之一是在react中修改数组状态。要修改索引

我使用两个数组present\u count和total\u count

显示计数[0]将存储第一个主题的计数第一个主题单击蓝色按钮的次数,显示计数[1]将存储下一个主题的计数,依此类推

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

当前_计数[i]将出现在斜杠符号的左侧,总_计数[i]将出现在斜杠符号的右侧


问题并不是关于平面列表,还有其他问题。其中之一是在react中修改数组状态。要修改索引处的值,请执行以下操作

让present_count=[…this.state.present_count];//浅拷贝避免变异 当前计数[i]+;//定期的加薪 this.setState{present_count};//更新状态 如果要将数组作为单个整数存储在异步存储中,请为每个数组使用唯一的键。附注+i AsyncStorage.setItem'PRESENT_COUNT'+i,this.state.PRESENT_COUNT[i]; 否则,如果您想要将整个阵列保存到异步存储,那么就这样做。 AsyncStorage.setItem'PRESENT\u COUNT',JSON.stringifythis.state.PRESENT\u COUNT; AsyncStorage.getItem'PRESENT\u COUNT'。thenvalue=>{ this.setState{present_count:JSON.parsevalue}; }; 您必须决定当前计数是数组还是整数

状态={ 当前计数:[],//它是一个数组 ... 组件安装{ AsyncStorage.getItem'PRESENT\u COUNT'。thenvalue=>{ this.setState{present\u count:parseIntvalue};//您正在将其解析为整数 }; 如果您想存储许多整数,那么请签出以加载多个键以在componentDidmount中显示_count数组。否则,只需使用JSON.parsevalue获取并解析整个数组即可

编辑:这里有一个工作说明


上面写着TypeError:试图分配给只读属性。它说的是什么,而做的是什么?你可能试图分配给一个不存在的属性。如果不看到它,很难判断。你能链接到修改过的代码吗?Edit Expo Snakp很好。正是我想要的方式。谢谢你!你是一个救世主!另外,删除这个.state.from第23行和第24行,这样当用户重新打开应用程序时,递增的值就会出现。
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>
    );
  }
}