Question

我想显示一些带有平面列表的项目，当我点击该项目时，我希望它变为绿色。我遇到的问题是，我点击了几个项目，然后搜索设备，例如：112。删除条目后，我看到以前的项目不再是绿色。小吃：https://snack.expo.io/Skhaj78WU

<FlatList
   data={this.state.data}
   renderItem={({ item }) => <Item item={item}/>
   keyExtractor={item => item[0]}
   ItemSeparatorComponent={this.renderSeparator}
   ListHeaderComponent={this.renderHeader}
   extraData={this.state.data}
/>

这是Item组件：

class Item extends Component{
  constructor(props) {
    super(props)
    this.state={
      currentColor:'white'
    }
    this.onClick = this.onClick.bind(this)
  }

  onClick() {
    console.log(this.props.item[1].isSelected)
    console.log(this.props.item[0])
    this.props.item[1].isSelected = !this.props.item[1].isSelected
    var color = 'white'
    if (this.props.item[1].isSelected){
      color='green'
    }
    this.setState({currentColor:color})
  }

  render(){
    return (
      <TouchableHighlight onPress={this.onClick} key={this.props.item[0]}>
        <View style={[styles.item, {backgroundColor: this.state.currentColor}]}>
          <Text style={styles.title}>{this.props.item[1].name}</Text>
        </View>
      </TouchableHighlight>
    );
  }
}

Answer 1

此行引起您的问题：

this.props.item[1].isSelected = !this.props.item[1].isSelected

道具应始终被视为只读。从列表项修改列表的通常方法是将回调传递给每个项，然后从父组件修改列表，如下所示：

Snack

class Item extends Component {
  constructor(props) {
    super(props);
  }

  getColor = () => (this.props.item[1].isSelected ? 'green' : 'white');

  render() {
    return (
      <TouchableHighlight onPress={this.props.onClick} key={this.props.item[0]}>
        <View style={[styles.item, { backgroundColor: this.getColor() }]}>
          <Text style={styles.title}>{this.props.item[1].name}</Text>
        </View>
      </TouchableHighlight>
    );
  }
}

  toggleListItem = index => {
    const { data } = this.state;
    data[index][1].isSelected = !data[index][1].isSelected;
    this.setState({ data });
  };

  render() {

    return (
      <SafeAreaView style={{ flex: 1 }}>
        <FlatList
          data={this.state.data}
          renderItem={({ item, index }) => (
            <Item item={item} onClick={() => this.toggleListItem(index)} />
          )}
          keyExtractor={item => item[0]}
          ItemSeparatorComponent={this.renderSeparator}
          ListHeaderComponent={this.renderHeader}
          extraData={this.state.data}
        />
      </SafeAreaView>
    );
  }

平面清单未按预期显示项目

1 个答案: