Question

我关注https://facebook.github.io/react-native/releases/next/docs/flatlist.html制作了FlatList并将this.state传递给了extraData但是，一旦删除了某个项目，该项目仍会显示。我还记录了this.state以确保该项目已删除，确实已删除。我的代码如下：

class DescriptionItem extends React.PureComponent {

  render() {
    return (
      <TouchableOpacity
        style={this.props.containerStyle}
        onPress={(event) => {this.props.onPress(this.props.value)}}>
        <Text style={this.props.style}>{this.props.value}</Text>
      </TouchableOpacity>
    )
  }
}


export default class CardWorkDescriptionsList extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      data: [],
      error: null,
      refreshing: false,
    };
  }

  _notifyItemSelected(text) {
    if(this.props.onItemSelected) {
      this.props.onItemSelected(text)
    }
  }

  _onItemSelected = (selectedItem) => {
    var array = this.state.data;
    var index = array.indexOf(selectedItem)
    array.splice(index, 1); 
    console.log(array)
    this.setState({data: array });
    console.log("yeah",this.state.data)
    this._notifyItemSelected(selectedItem);
  }

  makeRemoteRequest = () => {
    //TODO: fetch data
    this.setState({data: descriptionsFake})
  }


  componentDidMount() {
    this.makeRemoteRequest();
  }

  render() {
    return (
      <View style={styles.cardLight}>
      <FlatList
        data={this.state.data}
        extraData={this.state}
        renderItem={(item) => (
          <DescriptionItem
            containerStyle={styles.itemContainer}
            style={styles.content}
            value={item.item}
            onPress={(selectedItem)=>this._onItemSelected(selectedItem)}/>
        )}
        keyExtractor={item => item.substring(0,20)}
      />
      </View>
    );
  }
}

Answer 1

尝试扩展React.Component而不是PureComponent

将extraData传递给FlatList是不行

1 个答案: