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

Question

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函数中不起作用。另外，我还没有在_renderItem中发布其余代码，因为这里没有必要。

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

Answer 1

它实际上正在工作，状态将正确更新，但 FlatList 不是，因为它仅在this.state.data更改时重新渲染。如果你想用其他状态或道具更新平面列表，你需要使用 extraData 道具。

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

Answer 2

提供TouchableOpacity组件的唯一键

请参阅本指南 https://reactjs.org/docs/lists-and-keys.html#extracting-components-with-keys