React Native Flatlist renderItem

Question

使用 React Native，FlatList 组件存在一些问题。 这是我的平面列表

    <FlatList
     data={this.state._data}
     renderItem={() => this.renderItem()}
     refreshControl={
       <RefreshControl
        onRefresh={() => this.handleRefresh}
        refreshing={this.state.refreshing}
       />
      }
    />

这是我的 renderItem 函数：

    renderItem({item, index}) {
     return (
      <View style={{marginTop: 10, marginHorizontal: 10, paddingLeft: 
         10}}>
        <ListItem
            roundAvatar
            title={`${item.itemName}`}
            subtitle={`${item.amount}`}
            avatar={require('../../../images/logo.png')}
        />
        <View
            style={{
                paddingBottom: 10,
                paddingTop: 10,
                display: 'flex',
                flexDirection: "row",
                justifyContent: "space-around",
                alignContent: "center"
            }}
         >
            <View style={{ flexDirection: "row", alignContent: 
                 "center", width:"45%"}}>
                <Button
                    block
                    small
                    // disabled={this.state.acceptButtonGray}
                    style=
                      {this.state.acceptButtonGray ? ({
                      backgroundColor: 'gray',
                      width: "100%"
                      }) : ({backgroundColor: "#369ecd",
                         width: "100%"
                      })}
                    onPress={() =>
                      this.setState({
                         modalVisible: true,
                         // acceptOrDeclineModalText: `Accept offer for ${item.amount} ${'\b'} Are you Sure?`,
                         acceptOffer: true,
                          })
                      }
                      >
                    <Text>
                        Accept
                    </Text>
                </Button>
            </View>
        </View>
    </View>
   );
  }

按钮中的 onPress 中的 this.setState 应该使 Modal 可见，并将 acceptOffer 设置为 true。模态打开，用户确认他们的报价。现在打开该模式的报价按钮应该是灰色的，甚至更好的是禁用。

如上所示传递我的 RenderItem 函数，我收到

    TypeError: Cannot read property 'item' of undefined.

像这样传递我的 RenderItem 函数：

    renderItem={this.renderItem}

我得到这个错误：

    _this2.setState is not a function

FlatList 组件肯定对我的部分问题负责，以及我如何以及在何处调用 this.setState。我的帖子中只有一个按钮，但是有两个，一个是接受，一个是拒绝。有两个模态会改变什么吗？

FlatList 可以轻松地显示我的 ListItem 组件，直到我尝试在包含这些 ListItem 的视图内的按钮中调用 this.setState。

模态关闭按钮采用 this.state.acceptOffer，如果为 true，则将 this.state.acceptButtonGray 设置为 true，此逻辑是否应该在其他地方？

是否有另一种方法可以在不使用组件状态的情况下打开模式并更改按钮颜色？ React 是否需要 TouchableOpacity 中的这些按钮？

非常感谢您提供的任何帮助。

Answer 1

你应该像这样写一个 renderItem 函数

renderItem = ({item, index}) => {
 // return here
}

Answer 2

将您的 renderItem 方法更改为 renderItem={this.renderItem.bind(this)}?

Answer 3

1) 你可以把函数写成 -

renderItem = ({item, index}) => { // return here }

2) 或者如果你想执行你的函数然后 -

<FlatList
 data={this.state._data}
 renderItem={(item) => this.renderItem.bind(this, item)}
 refreshControl={
   <RefreshControl
    onRefresh={() => this.handleRefresh}
    refreshing={this.state.refreshing}
   />
  }
/>

Answer 4

您必须使用bind(this,item) 或更改(item)=> 等功能。

Answer 5

我遇到了同样的问题并浪费了很多时间来弄清楚为什么它没有重新渲染：

如果状态有任何变化，我们需要设置FlatList 的extraData 属性，如下所示：

<FlatList data={this.state.data} extraData={this.state} .../>

请在此处查看官方文档：

https://facebook.github.io/react-native/docs/flatlist.html

Answer 6

根据我的知识项和索引在平面列表的 renderItem 中作为对象传递

所以我们可以通过两种方式

一种方式

平面列表组件

<FlatList
     data={this.state.data}
     keyExtractor={(item, index) => index.toString()}
     renderItem={({ item, index }) => this._renderItem(item, index)} //Passing as object from here.
/>

渲染项目

_renderItem = (item, index) => {
      console.log(item)
      console.log(index)
}

2路

平面列表组件

<FlatList
     data={this.state.data}
     keyExtractor={(item, index) => index.toString()}
     renderItem={( item, index ) => this._renderItem(item, index)}
/>

渲染项目

_renderItem = ({item, index}) => { // Passing as object from here
      console.log(item)
      console.log(index)
}