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

Shubham Bisht

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中，因为这里没有必要。

我将此代码用作Checkbox的替代方法。请帮忙，我不知道这是怎么回事。我也尝试过使用带有setState

牙本质

它实际上正在工作，并且状态将被正确更新，但是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
/>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。