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无法在Flatlist中调用的_renderItem函数中工作。另外，我没有将其余代码发布在_renderItem中，因为这里没有必要。

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

一起使用

Answer 1

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

Answer 2

为TouchableOpacity组件提供唯一键

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

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

2 个答案: