时间戳

首页 > 解决方案 > 为什么我的 this.setState 在函数中不起作用？

android - 为什么我的 this.setState 在函数中不起作用？

问题描述

export default class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
        checked: false,
    };
  }

  // this.setState is not working here.
  changeLike = () => { this.setState({checked: !this.state.checked}) }

  _renderItem = ( item ) => {

      return(
    <View style={styles.news_item}>
      <View style={styles.unlikeIcon}>
        { this.state.checked === false && 
          <TouchableOpacity onPress={this.changeLike}>
            <Image 
              style={{tintColor: 'red', width: 25, height: 25}}
              source={require('../../assets/imgs/unlike.png')}
            />
          </TouchableOpacity>
        }
        { this.state.checked === true && 
           <TouchableOpacity onPress={this.changeLike}>
             <Image 
               style={{tintColor: 'red', width: 25, height: 25}}
               source={require('../../assets/imgs/likepic.png')}
             />
            </TouchableOpacity>
            }
        </View>    
      </View>
    );
  }

  render() {
           return(
        <View>
          <FlatList 
            data={this.state.data}
            keyExtractor={ (index) => index.toString() }
            renderItem={ ({item}) => this._renderItem(item) }
          />
        </View>
       );
  } 
}

我this.setState不在_renderItem从 Flatlist 调用的函数中工作。另外，我没有在 _renderItem 中发布其余代码，因为这里没有必要。

我使用此代码作为复选框替代。请帮忙，我不知道这里有什么问题。我也尝试过使用回调函数setState

标签： androidreactjsreact-native

解决方案

它实际上正在工作并且状态将正确更新，但 FlatList 不是，因为它仅在this.state.data更改时重新呈现。如果要使用其他状态或道具更新 FlatList，则需要使用extraData道具。

<FlatList 
  data={this.state.data}
  keyExtractor={ (index) => index.toString() }
  renderItem={ ({item}) => this._renderItem(item) }
  extraData={this.state.checked} // this is the magic
/>

推荐阅读