Question

如何将带有值的函数发送给子组件 React？

2021-03-26

142

javascript react-native redux components parent-child

实际上，在我的 React Native 应用中，我在 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;

Answer 1

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

<Button transparent onPress={logoutFunc}>

Answer 2

已编辑

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

If ECMA script 6 syntax is allowed:

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>

如果有效请告诉我！