Question

在我的应用中，我在'export'之外有一个函数，该函数返回一个视图，在视图内按钮的单击事件中，调用另一个在'export'内部定义的函数>。点击按钮时收到错误- this4.myFunc is not a function. 下面的屏幕截图-error screen shot

下面是我的代码-

export default class RosterView extends Component{
   constructor(props){
   super(props)
   this.state={
    ....
   }

  render () {
    mContext = this;
    return (
       <List dataArray={mContext.state.rosterList}
       renderRow={(item) =>
        <View style = {MainView.PlayerSelected}>
         <AddPlayersToRosterList
          data={item}/>
      </View>
    }>
</List>
     );
    }
   isExist = (item) =>{
     //My Code
     return flag;
   }
   addRemovePlayer = (data) =>  {
    //My Code
   }


}

 const AddPlayersToRosterList= ({data}) => (
          (!mContext.isExist(data))?
          <View style = {MainView.PlayerSelected}>
             <Ripple style={MainView.PlayerAddRemoveContainer} onPress={()=> this.addRemovePlayer(data)}>             
             </Ripple>
          </View>
 )

当按下AddPlayersToList内部的按钮时，this.addRemovePlayer()显示错误。

请为您提供解决此问题的帮助。

谢谢。

Answer 1

您好，您在这里有很多错误。我试图重写您的代码。在这里试试。让我知道是否有帮助。删除最后编写的整个AddPlayersToRosterList功能组件。并将其作为功能重写到组件RosterView中。

问题是，如果您尝试使用未在功能组件内部声明的功能，则这些组件不知道您要尝试调用的功能。对于const AddPlayersToRosterList，您调用函数isExist(data)和this.addRemovePlayer(data)，它们在RosterView内声明，但不在AddPlayersToRosterList内声明。

       // add this function inside RosterView 
       AddPlayersToRosterList = (data) => {
              (!this.isExist(data))?
              <View style = {MainView.PlayerSelected}>
                 <Ripple 
                  style={MainView.PlayerAddRemoveContainer}  
                  onPress={() => this.addRemovePlayer(data)}>             
                 </Ripple>
              </View>
     }

       render (){
        var mContext = this;
        return (
           <List dataArray={mContext.state.rosterList}
             renderRow={(item) =>
              <View style = {MainView.PlayerSelected}>
                {this.AddPlayersToRosterList(item)// make sure you call the function here} 
              </View>
           }>
           </List>
         );        
       }

您可以将所需的功能作为道具传递给功能组件，而无需删除任何内容。但您可能需要更多的内存和计算能力，具体取决于要传递的道具数量。

const AddPlayersToRosterList= ({data, isExist, mContext, addRemovePlayer}) => (
          (!mContext.isExist(data))?
          <View style = {MainView.PlayerSelected}>
             <Ripple 
               style={MainView.PlayerAddRemoveContainer} 
               onPress={()=> this.addRemovePlayer(data)}
             >             
             </Ripple>
          </View>
 )

以及您的渲染方法中

 render () {
    mContext = this;
    return (
       <List dataArray={mContext.state.rosterList}
         renderRow={(item) =>
          <View style = {MainView.PlayerSelected}>
            <AddPlayersToRosterList
              data={item} 
              isExist={this.isExist} 
              mContext={mContext}
              addRemovePlayer={this.addRemovePlayer}
            />
          </View>
       }>
       </List>
     );
  }

React-Native无法调用函数

1 个答案: