Javascript 模态不'；不要在本机中打开。给予；“未定义”不是对象；错误

我正在尝试使用Modal from从平面列表中打开项目。但是，我收到一个错误“undefined”不是对象（正在计算“this.refs.modal.open”），并且无法找出我做错了什么。有人能帮我吗

这是我的代码（FlatList和ModalBox）：

导出默认类列表扩展React.PureComponent{
建造师（道具）{
超级（道具）；
this.fetchMore=this.\u fetchMore.bind（this）；
this.fetchData=this.\u fetchData.bind（this）；
this.openModal=this.openModal.bind（this）；
此.state={
孤岛加载：是的，
isLoadingMore:错误，
_数据：空，
_数据在：“”之后，
伊索彭：错，
isDisabled:错误，
swipeToClose：没错，
};
}
onClose（）{
log（'Modal just closed'）；
}
onOpen（）{
log（'Modal just opened'）；
}
onClosingState（状态）{
log（“刚刚更改了swipeToClose的打开/关闭”）；
}
OpenModel（id）{
this.modal.open（）；
}
render（）{
if（此.state.isLoading）{
返回(
);
}否则{
返回(
{
返回(
this.modalOpen=modal}
swipeToClose={this.state.swipeToClose}
onClosed={this.onClose}
onOpened={this.onOpen}
onClosingState={this.onClosingState}>
基本模态
);
}}
keyExtractor={（项，索引）=>index}
/>
);
}
}
}

导出默认类列表扩展React.PureComponent{
建造师（道具）{
超级（道具）；
this.fetchMore=this.\u fetchMore.bind（this）；
this.fetchData=this.\u fetchData.bind（this）；
this.openModal=this.openModal.bind（this）；
此.state={
孤岛加载：是的，
isLoadingMore:错误，
_数据：空，
_dataAfter:“”，
伊索彭：错，
isDisabled:错误，
swipeToClose：对
};
}
onClose（）{
log（“模态刚刚关闭”）；
}
onOpen（）{
log（“刚刚打开的模态”）；
}
onClosingState（状态）{
log（“刚刚更改了swipeToClose的打开/关闭”）；
}
OpenModel（id）{
this.modal.open（）；
}
render（）{
if（此.state.isLoading）{
返回(
);
}否则{
返回(
{
返回(
);
}}
keyExtractor={（项，索引）=>index}
/>
{/*从flatlist中取出模式，它将工作*/}
（this.modalOpen=modal）}
swipeToClose={this.state.swipeToClose}
onClosed={this.onClose}
onOpened={this.onOpen}
onClosingState={this.onClosingState}>
基本模态
);
}
}
}

导出默认类列表扩展React.PureComponent{
建造师（道具）{
超级（道具）；
this.fetchMore=this.\u fetchMore.bind（this）；
this.fetchData=this.\u fetchData.bind（this）；
this.openModal=this.openModal.bind（this）；
此.state={
孤岛加载：是的，
isLoadingMore:错误，
_数据：空，
_dataAfter:“”，
伊索彭：错，
isDisabled:错误，
swipeToClose：对
};
}
onClose（）{
log（“模态刚刚关闭”）；
}
onOpen（）{
log（“刚刚打开的模态”）；
}
onClosingState（状态）{
log（“刚刚更改了swipeToClose的打开/关闭”）；
}
OpenModel（id）{
this.modal.open（）；
}
render（）{
if（此.state.isLoading）{
返回(
);
}否则{
返回(
{
返回(
);
}}
keyExtractor={（项，索引）=>index}
/>
{/*从flatlist中取出模式，它将工作*/}
（this.modalOpen=modal）}
swipeToClose={this.state.swipeToClose}
onClosed={this.onClose}
onOpened={this.onOpen}
onClosingState={this.onClosingState}>
基本模态
);
}
}
}

请查看react文档。您需要绑定函数才能使用

this

@bennygenel我在构造函数中绑定它（this.openModal=this.openModal.bind（this）；）。我做错什么了吗？对不起，我错了。我没看见。请看一下关于@bennygenel的文档，我试图替换'ref={（modal）=>this.modalOpen=modal}'上的模态字符串，但它仍然显示相同的错误。我不确定我是否理解正确。请用代码的最后状态和完整的错误消息更新您的问题。请查看react文档。您需要绑定函数才能使用

this

@bennygenel我在构造函数中绑定它（this.openModal=this.openModal.bind（this）；）。我做错什么了吗？对不起，我错了。我没看见。请看一下关于@bennygenel的文档，我试图替换'ref={（modal）=>this.modalOpen=modal}'上的模态字符串，但它仍然显示相同的错误。我不确定我是否理解正确。请用代码的最后状态和完整的错误消息更新您的问题，好吗

    export default class List extends React.PureComponent {
  constructor(props) {
    super(props);
    this.fetchMore = this._fetchMore.bind(this);
    this.fetchData = this._fetchData.bind(this);
    this.openModal =  this.openModal.bind(this);
    this.state = {
      isLoading: true,
      isLoadingMore: false,
      _data: null,
      _dataAfter: '',
      isOpen: false,
      isDisabled: false,
      swipeToClose: true,
    };
  }

  onClose() {
    console.log('Modal just closed');
  }

  onOpen() {
    console.log('Modal just openned');
  }

  onClosingState(state) {
    console.log('the open/close of the swipeToClose just changed');
  }
openModal(id) {
    this.modal.open();
  }

  render() {
    if (this.state.isLoading) {
      return (
        <View style={styles.container}>
          <ActivityIndicator size="large" />
        </View>
      );
    } else {
      return (

        <FlatList
        numColumns={3}
          data={this.state._data}
          renderItem={({item: rowData}) => {
            return (
                <View style={styles.container}>
                <View style={styles.imageWrapper}>
                <TouchableOpacity
                onPress={this.openModal}>
                  <Image
                    style={styles.image }
                    source={{
                      uri: rowData.data.icon_img === '' ||
                        rowData.data.icon_img === null
                        ? 'https://via.placeholder.com/70x70.jpg'
                        : rowData.data.icon_img,
                    }}
                  />
                </TouchableOpacity>
              </View>
 <Modal
          style={styles.modal}
           ref={(modal) => this.modalOpen = modal}
          swipeToClose={this.state.swipeToClose}
          onClosed={this.onClose}
          onOpened={this.onOpen}
          onClosingState={this.onClosingState}>
            <Text style={styles.text}>Basic modal</Text>
        </Modal>
           </View>
            );
          }}
          keyExtractor={(item, index) => index}
        />

      );
    }
  }
}