React Native Elements 復選框不斷選擇所有項目，而不是選擇一個項目

Question

希望一切都好，每個人都有一個美好而安全的周末。 我需要一點幫助。 我已經堅持了一個星期了。 我有一個 react native 項目，我在其中使用了一個帶有 react native 元素復選框的 flatlist。 我有一個顯示從我的數據庫中獲取的數據的平面列表。 所以一切正常。 但是當我檢查正在顯示的項目之一時，它會檢查所有項目。 我用谷歌搜索並嘗試了幾種不同的方法，這些方法也是我從這里得到的。 在復選框中沒有選中任何內容或全部選中。 你們能不能看看我下面的代碼，讓我知道我是否遺漏了什么？

非常感謝！！！

 import React from 'react'; import { View, Text, FlatList, StyleSheet, } from 'react-native'; import { ListItem, CheckBox, } from 'react-native-elements'; import BackButtonMGMT from '../Components/BackButtonMGMT'; export default class ViewCategory extends React.Component { constructor(props) { super(props); this.state = { dataSource: [], checked: false, } } render() { const { navigation } = this.props; const cust = navigation.getParam('food', 'No-User'); const other_param = navigation.getParam('otherParam', 'No-User'); const cust1 = JSON.parse(cust); const data = cust1; console.log(data); return ( <View style={styles.container}> <BackButtonMGMT navigation={this.props.navigation} /> <FlatList data={data} extraData={this.state} keyExtractor={(item, index) => index.toString()} renderItem={({ item, index }) => ( <CheckBox center titleProps={{ color: 'black', fontWeight: 'bold'}} title={item} iconRight checked={this.state.checked} size={30} onPress={() => this.setState({checked: !this.state.checked})} containerStyle={styles.checkBox} //bottomDivider //chevron /> )} /> </View> ) } onCheck = (item) => { this.setState((state) => ({ checked: !state.checked, })); } }

Answer 1

您當前正在將列表中的復選框設置為checked={this.state.checked}

看起來您沒有使用 onCheck 方法，而是在onPress處理事件。 因此，當您的 onPress 事件處理程序觸發時，它會切換整個列表，因為列表中的每個項目都使用相同的狀態。

相反，您需要跟蹤數組處於選中狀態的所有項目。 你會想要做這樣的事情：

this.state = {
  items: [],
  ... // other state
}

...
renderItem={({ item }) => (
  <CheckBox
    checked={!!item.checked} // <-- individual item checked state here
    onPress={() => {
      const items = [...this.state.items] // <-- shallow copy to show we're not mutating state
      const currentItemIndex = items.findIndex(v => v.name === item.name) // <-- lookup by something unique on the item like an ID. It's better to lookup rather than assume the array indexes are ordered the same.
      items[currentItemIndex].checked = !items[currentItemIndex].checked
      this.setState(state => ({ ...state, items }))
    }}
    ... // other props
  />
)}

Answer 2

這就是我解決它的方法，但現在我無法一次選擇多個項目。

 export default class ViewCategory extends React.Component { constructor(props) { super(props); this.state = { dataSource: [], checked: null, } } render() { const { navigation } = this.props; const cust = navigation.getParam('food', 'No-User'); const other_param = navigation.getParam('otherParam', 'No-User'); const cust1 = JSON.parse(cust); const data = cust1; console.log(data); return ( <View style={styles.container}> <BackButtonMGMT navigation={this.props.navigation} /> <FlatList data={data} extraData={this.state} keyExtractor={(item, index) => index.toString()} renderItem={({ item, index }) => ( <CheckBox center titleProps={{ color: 'black', fontWeight: 'bold'}} title={item} iconRight checked={this.state.checked === item} size={30} onPress={() => this.setState({checked: item})} containerStyle={styles.checkBox} /> )} /> </View> ) }