web-dev-qa-db-ja.com

ReactネイティブフラットリストrenderItem

Reactネイティブで作業しています。FlatListコンポーネントに問題があります。これは私の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はモーダルを表示し、acceptOfferをtrueに設定する必要があります。モーダルが開き、ユーザーはオファーを確認します。そのモーダルを開いたオファーボタンは灰色になり、無効になります。

上記のようにRenderItem関数を渡すと、

    TypeError: Cannot read property 'item' of undefined.

次のようにRenderItem関数を渡します。

    renderItem={this.renderItem}

私はこのエラーを受け取ります：

    _this2.setState is not a function

FlatListコンポーネントは、私の問題の一部、およびthis.setStateを呼び出す方法と場所を担当しています。私の投稿に表示されているボタンは1つだけですが、承認用と拒否用の2つのボタンがあります。 2つのモーダルを使用すると、何かが変わりますか？

FlatListは、ListItemsを含むビュー内のボタンでthis.setStateを呼び出そうとするまで、ListItemコンポーネントを簡単に表示します。

モーダルの閉じるボタンはthis.state.acceptOfferを受け取り、trueの場合、this.state.acceptButtonGrayをtrueに設定します。このロジックは別の場所にある必要がありますか？

コンポーネントの状態を使用せずにモーダルを開いてボタンの色を変更する別の方法はありますか？反応はTouchableOpacity内にこれらのボタンが必要ですか？

私は与えられた助けに大いに感謝します。

react-nativereact-native-iosreact-native-flatlist
7
falconsAndFunctions

あなたはこのようなrenderItem関数を書くべきです

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

たぶん、renderItem={this.renderItem.bind(this)}に変更してみましたか？

3
Marcos Demétrio

私は同じ問題を経験し、それがなぜ再レンダリングされなかったのかを理解するために何時間も無駄にしました：

次のように状態に変化がある場合は、extraData prop of FlatListを設定する必要があります。

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

こちらの公式ドキュメントをご覧ください。

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

0
atulkhatri

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}
   />
  }
/>
0
Samiksha Jagtap

bind(this,item)を使用するか、(item)=>のような関数を変更する必要があります。

0
Amin Noura