Question

在这段代码中，我试图增加状态itemNumber，但是它不起作用。 “在现有状态转换期间无法更新”

  iNumber() {
    this.setState({itemNumber: this.state.itemNumber + 1})
  }

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.row}>
          <FlatList data={this.state.dataSource} numColumns={5} renderItem={({item}) =>
            <View>
              {this.iNumber()}
            </View>
          } keyExtractor={({id}, index) => id.toString()} />
        </View>
      </View>
    );
  }

谢谢。

Answer 1

setState重新呈现了UI，因此在render中调用setState会产生无限循环的渲染，而且setState本质上是异步的，因此在调用isNumber时，先前setState的呈现已在起作用。

永远不要调用渲染中的setState ，请参阅this，以更好地了解状态更改和UI重新呈现。

此外，为了使单元格项目号保持在该状态，您可能要考虑对单元格执行一些触摸操作，然后使用触摸处理程序调用setState。下面是显示相同代码的代码段。

renderItem={({item}) =>
    <TouchableOpacity onPress={() => this.iNumber()}>
        <... Ui... />
    </TouchableOpacity>

或者，如果不是您想要的情况，请帮助我们以更丰富的方式解决您的问题。

编码愉快！

Answer 2

我只需要这样的增加状态：

    <FlatList data={this.state.dataSource} numColumns={5} renderItem={({item}) =>
      <View>
        <Text>{this.state.itemNumber++}</Text>
        <Hero title={item.name} square='true />
        {this.state.itemNumber % 5 == 0 ? <Box><TextS>Test</TextS></Box> : null}
      </View>
    } keyExtractor={({id}, index) => id.toString()} />

但是我不明白为什么{this.state.itemNumber ++}必须在组件中。

在FlatList中增加状态

2 个答案: