使用状态值更新操作表标题答案

【问题标题】：Update Actionsheet title with state value使用状态值更新操作表标题
【发布时间】：2019-08-16 07:08:25
【问题描述】：

1) 我有一个 Flatlist，在 renderItem 方法中我有 Actionsheet，代码如下：

renderItem = ({ item }) => (
<TouchableOpacity onLongPress={() => {this.longPressed(item)}} activeOpacity={0.5} onPress={() => this.actionOnRow(item)} underlayColor="white">
        <ListItemViewCell data={item} />
      </TouchableOpacity>
<ActionSheet
        ref={o => this.ActionSheet = o}
        title={this.getTitle()}
        options={['Generate', 'Delete', 'Cancel']}
        cancelButtonIndex={2}
        destructiveButtonIndex={2}
        onPress={(index) => {
            if (index == 0) {
              this.generate(this.state.selectedListing)
            }
            if (index == 1) {
              this.delete(this.state.selectedListing)
            }
          }}
      />
)
getTitle() {
    return this.state.selectedProfileName
  }

“getTitle”方法返回来自 Flatlist 中选定单元格的配置文件名称。但对我来说，在 Actionsheet 中，没有显示标题。我还在构造函数中绑定了“getTitle”方法。

“getTitle()”方法被调用直到平面列表项的数量。有人可以建议我如何进一步在 ActionSheet 中显示标题吗？ 更新：

3) 我可以访问里面的项目吗？

更新： 在渲染方法中

  <FlatList
  data={this.state.data}
  renderItem={this.renderItem}
  keyExtractor={item => item.id}
  ItemSeparatorComponent={this.flatListItemSeparator}
  ListFooterComponent={this.renderFooter}
  // onRefresh={this.handleRefresh}
  refreshing={this.state.refreshing}
  onEndReached={this.handleLoadMore}
  onEndReachedThreshold={0}
  onRefresh={this.refreshProfiles}
/>

从平面列表生成列表后，当我长按平面列表项时，我想在操作表上显示两个选项，我使用了“[https://github.com/beefe/react-native-actionsheet][1]”。

在 Cell longpress 方法中，我正在更新状态值并尝试触发 Actionsheet，如下所示

longPressed(item) {
    console.log("Long pressed " + JSON.stringify(item)
    this.setState({
      selectedProfileName: item.name
    },() => {
      console.log("selected Listing "+ this.state.selectedProfileName)
      this.ActionSheet.show()
    })
  }

在 setstate 完成中，我调用了 actionsheet 的 show() 方法。更新状态值后，配置文件名称不会显示在 Actionsheet 标题中。

有人可以帮我解决这个问题 [1]：https://github.com/beefe/react-native-actionsheet

项目的 JSON 响应是

{ "id": 985646, "name": "Business Name", "website": "businesswebsite.com", "formatted_website": "businesswebsite.com", "is_favorite": false }

【问题讨论】：

标签： react-native react-native-android react-native-flatlist react-native-navigation

【解决方案1】：

您的代码没有约束力。如果你有绑定，你的代码应该是这样的。

title={this.getTitle.bind(this)}

OR

title={() => this.getTitle()}

如果您使用状态值，则不必调用函数。

title={this.state.selectedProfileName}

【讨论】：

感谢您的快速响应，我已尝试使用状态值，但状态值未更新。 & 当我按照你所说的用绑定更新时，没有调用“getTitle”方法，我通过保留日志语句进行检查
@iOSDev 通过编辑问题显示您的 ActionSheet 的结构。
我听不懂你说什么
我已经更新了结构，请检查一下
@iOSDev 您正在更新“selectedName”。但是你使用的是'selectedProfileName'。值彼此不同。

【解决方案2】：

请检查以下代码第一步：使用alert查看商品数据

renderItem = (item) => (
alert(JSON.stringify(item))
<TouchableOpacity onLongPress={() => {this.longPressed(item)}} activeOpacity={0.5} onPress={() => this.actionOnRow(item)} underlayColor="white">
        <ListItemViewCell data={item} />
      </TouchableOpacity>
<ActionSheet
        ref={o => this.ActionSheet = o}
        title={this.getTitle()}
        options={['Generate', 'Delete', 'Cancel']}
        cancelButtonIndex={2}
        destructiveButtonIndex={2}
        onPress={(index) => {
            if (index == 0) {
              this.generate(this.state.selectedListing)
            }
            if (index == 1) {
              this.delete(this.state.selectedListing)
            }
          }}
      />
)
getTitle() {
    return this.state.selectedProfileName
  }

【讨论】：