如何将具有值的函数发送到子组件 React？答案

【问题标题】：How to send function with value to child component React?如何将具有值的函数发送到子组件 React？
【发布时间】：2021-06-22 22:35:29
【问题描述】：

实际上，在我的 React 本机应用程序中，我在 Logout 函数中将 id 值从父视图发送到子组件时遇到问题，我不知道如何将值发送到函数中；实际上我有下一个控制台错误：

警告：无法从不同组件的函数体内更新组件。
并且
TypeError：null 不是对象（评估“users.current.id”）

我的简历代码是下一个（Home 是父级，GeneralHeader 是子级）：

Home.tsx（我可以看到控制台中打印了正确的字符串值（users.current.id））

import React from 'react'
import {Text, Container, Content, View} from 'native-base'
import Styles from './Styles/HomeStyles'
import {connect} from 'react-redux'
import GeneralHeader from '../Components/GeneralHeader'
import {Auth} from '../Services/Auth/AuthService'

const Home =(props) => {
   const {navigation, users} = props;

   return(
    <Container >
        {console.log(users.current.id)}
        <GeneralHeader backButton={false} moreButton={true} title={"Home"} logoutFunc={Logout(users.current.id)}/>
        <Content >      
            <View style={Styles.content}>                  
                <Text>Hola {users.current.id}</Text>
            </View>
        </Content>
     </Container>
    );

  async function Logout(id:string){
    await Auth.LogoutUser(id, props);
    navigation.navigate('Login');
  }
}

const mapStateToProps=(state)=>{
  const {users} = state;
  return {users};
}

export default connect(mapStateToProps)(Home);

GeneralHeader.tsx

import React, {useState} from 'react'
import {Button, Header, Body, Title, Left, Right, Icon, Card, CardItem, Text, Fab} from 'native-base'


const GeneralHeader=(props)=>{
    const {backButton, title, moreButton, logoutFunc} = props;
    return(
     <>
        <Header>
            {
                backButton===true ? 
                <Left>
                    <Button transparent>
                        <Icon name='arrow-back' />
                    </Button>
                </Left>
                :null
            }              
            <Body>
                <Title>{title}</Title>
            </Body>
            {
                moreButton===true? 
                <Right>
                    <Button transparent onPress={()=> logoutFunc}>
                        <Icon name='menu' />
                    </Button>        
                </Right>
                :null
            }
        </Header>
     </>
    );
 }

 export default GeneralHeader;

【问题讨论】：

只需将logoutFunc={Logout(users.current.id)} 更改为logoutFunc={()=>Logout(users.current.id)}。当使用裸Logout(users.current.id) 时，该函数将在组件渲染期间立即执行
这种方式渲染但是当我按下按钮时它什么也不做
在您的 Button 组件中，您应该调用函数而不是返回函数本身。将onPress={()=> logoutFunc} 更改为onPress={()=> logoutFunc()}。这样就可以了
有效，函数被调用；我必须修复 Navigator 的错误，但您的评论是正确的，谢谢

标签： javascript react-native redux components parent-child

【解决方案1】：

const Logout = (id:string)=>async ()=>{
    await Auth.LogoutUser(id, props);
    navigation.navigate('Login');
}

<Button transparent onPress={logoutFunc}>

【讨论】：

它不起作用，现在它标记了一个新错误“TypeError: Logout is not a function. (In 'Logout(users.current.id)', 'Logout' is undefined)”

【解决方案2】：

已编辑

我从未使用过 react native，但我尝试过 react。我知道你为什么要这样做，但如果你想处理这种行为，我建议使用返回函数的函数......类似于：

如果允许 ECMA 脚本 6 语法：

const handleLogout = (id:string) => async () => {
  await Auth.LogoutUser(id, props);
  navigation.navigate('Login');
};
...

Home.tsx 保持不变

<GeneralHeader backButton={false} moreButton={true} title={"Home"} logoutFunc={handleLogout(users.current.id)}/>

GeneralHeader.tsx 更改为

<Button transparent onPress={logoutFunc}>
  <Icon name='menu' />
</Button>

让我知道这是否有效！

【讨论】：

TypeError：注销不是函数。（在“注销（users.current.id）”中，“注销”未定义）。我通过 Logout 更改了 handleLogout name const
对不起，我错过了它不是 Logout 它是 handleLogout(users.current.id) 在你的 Home.tsx -> 通用标题，这将完成工作
在另一条评论中，有人提出了解决方案，将按钮更改为：onPress={()=> logoutFunc} 到 onPress={()=> logoutFunc()}
这也有效，但更像是这样的语法consta logountFunc = () => () => {...} 这完全取决于你想如何处理它:)，问候！