Reactjs 反应本机：模态问题，未定义函数

我有一个组件Favorites2，我想通过按下标题导航栏中的按钮来调用一个模式弹出窗口。。。问题是，单击时出现以下错误消息：

this.refs.categorityModal.showCategoriteModel不是一个函数。在里面 'this.refs.categorieModal.showCategorieModal'，'this.refs.categorieModal.showCategorieModal' 是未定义的

在我添加第二个reducer chosedCategorie之前，该模式一直运行良好。我的减速器工作正常，因此我不确定它们是否与我遇到的问题有关

这是我的密码：

Favorites2.js

CategorieModal.js

render() {
    return (
      <Modal
        isVisible={ this.props.modalVisible }
        style={styles.modal}
        position='center'
        backdrop={true}>
        <FlatList
          data={categories}
          style={styles.flatlist}
          keyExtractor={(item) => item.id.toString()}
          renderItem={({item}) => (
            <TouchableOpacity
              style={styles.touchableOpacity}
              onPress={() => {
                this._choseCategorie(item.nom)
                this.refs.myModal.close()
              }}>
              <Text style={styles.text}>{item.nom}</Text>
            </TouchableOpacity>
          )}>
        </FlatList>
      </Modal>
    )
  }
}

---

您有什么想法吗？？？

showCategorieModal未找到，因为它链接到Connect而不是CategorieModal。有人知道如何修复它吗？

为什么要使用refs来处理模态的可见性？ 一种不使用refs的简单方法是将modalVisible设置为Favorite2状态，并在调用addModal时将其更改为true

class Favorites2 extends React.Component {

  static navigationOptions = ({ navigation }) => {
      const { params } = navigation.state
      // On accède à la fonction shareQuote et à la citation via les paramètres qu'on a ajouté à la navigation
        return {
            headerRight: <View style = { styles.header_container }>
                          <TouchableOpacity
                              style={styles.categorie_touchable_headerrightbutton}
                              onPress={ () => params.addModal() }>
                              <Text style={styles.header_text}>Categorie</Text>
                          </TouchableOpacity>
                        </View>
        }
  }

  constructor(props) {
    super(props)
    this.state = {
      fullQuotes: data,
      modalVisible: false
    }
    this._addModal = this._addModal.bind(this)
  }

  componentDidMount() {
    this.props.navigation.setParams({
      addModal: this._addModal
    })
  }

  _addModal() {
      this.setState({modalVisible: true})
  }

  _newQuotes() {
    const nom = this.props.chosedCategorie
    const newQuotes = this.state.fullQuotes.filter( quote => (
      nom == quote.categ1 || nom == quote.categ2 || nom == quote.categ3 || nom == quote.categ4 || nom == quote.categ5 || nom == "Toutes catégories") && (this.props.favoriteQuotes.findIndex(item => item.id === quote.id)!== -1) )
    return (newQuotes)
  }

  render() {
    return (
      <View style={styles.main_container}>
        <QuoteList2
          quotes={this._newQuotes()}
          navigation={this.props.navigation}
          favoriteList={true} // Ici on est bien dans le cas de la liste des citations favorites. Ce booléen à true permettra d'empêcher de lancer la recherche de plus de citations après un scroll lorsqu'on est sur la vue Favoris.
        />
        <CategorieModal
          modalVisible={this.state.modalVIsible} 
          parentFlatList={this}>
        </CategorieModal>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  main_container: {
    flex: 1,
    marginVertical: 20
  },
  header_container: {

  },
  categorie_touchable_headerrightbutton: {

  },
  header_text: {

  }
})

const mapStateToProps = state => {
  return {
    favoriteQuotes: state.fav.favoriteQuotes,
    chosedCategorie: state.cat.chosedCategorie
  }
}

export default connect(mapStateToProps)(Favorites2)

并在CategorieModal.js的模态中设置isVisible属性

render() {
    return (
      <Modal
        isVisible={ this.props.modalVisible }
        style={styles.modal}
        position='center'
        backdrop={true}>
        <FlatList
          data={categories}
          style={styles.flatlist}
          keyExtractor={(item) => item.id.toString()}
          renderItem={({item}) => (
            <TouchableOpacity
              style={styles.touchableOpacity}
              onPress={() => {
                this._choseCategorie(item.nom)
                this.refs.myModal.close()
              }}>
              <Text style={styles.text}>{item.nom}</Text>
            </TouchableOpacity>
          )}>
        </FlatList>
      </Modal>
    )
  }
}

---

有关更多详细信息，请参见

您是否尝试过使用回调引用而不是字符串？回调引用是什么意思？我不知道，你有一个例子吗？还是不起作用。。。

render() {
    return (
      <Modal
        isVisible={ this.props.modalVisible }
        style={styles.modal}
        position='center'
        backdrop={true}>
        <FlatList
          data={categories}
          style={styles.flatlist}
          keyExtractor={(item) => item.id.toString()}
          renderItem={({item}) => (
            <TouchableOpacity
              style={styles.touchableOpacity}
              onPress={() => {
                this._choseCategorie(item.nom)
                this.refs.myModal.close()
              }}>
              <Text style={styles.text}>{item.nom}</Text>
            </TouchableOpacity>
          )}>
        </FlatList>
      </Modal>
    )
  }
}