Блог

Главная - Вопросы по программированию - Как отправить функцию со значением дочернему компоненту React?

Как отправить функцию со значением дочернему компоненту React?

#javascript #react-native #redux #components #parent-child

Вопрос:

На самом деле в моем приложении React native у меня проблема с отправкой значения идентификатора из родительского представления в дочерний компонент в функции выхода из системы, я не знаю, как отправить значение в функцию; на самом деле у меня следующие ошибки консоли:

Предупреждение: Невозможно обновить компонент из тела функции другого компонента.
И
Ошибка типа: null не является объектом (оценка ‘users.current.id’)

Мой код резюме следующий (Главная страница-родитель, общий заголовок-дочерний):

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);

Общий руководитель.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;

Комментарии:

1. Просто просто logoutFunc={Logout(users.current.id)} переоденься logoutFunc={()=>Logout(users.current.id)} . При использовании bare Logout(users.current.id) функция будет выполняться сразу во время рендеринга компонента

2. таким образом, визуализация, но затем она ничего не делает, когда я нажимаю кнопку

3. В вашем компоненте кнопки вы должны вызывать функцию, а не возвращать саму функцию. измените onPress={()=> logoutFunc} на onPress={()=> logoutFunc()} . Этого будет достаточно

4. Это работает, функция вызывается; я должен исправить ошибку с навигатором, но ваш комментарий верен, спасибо

Ответ №1:

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

<Button transparent onPress={logoutFunc}>

Комментарии:

1. Это не работает, теперь он отмечает новую ошибку «Ошибка типа: Выход из системы не является функцией. (В «Выход из системы(users.current.id)’, «Выход из системы» не определен)»

Ответ №2:

отредактированный

Я никогда не использовал react native, но я пробовал использовать react. Idk, почему вы хотите это сделать, но если вы хотите справиться с этим, я бы рекомендовал использовать функцию, которая возвращает функцию… что-то вроде:

Если синтаксис сценария 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)}/>

Общий заголовок.tsx изменяется на

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

Дайте мне знать, если это сработает!

Комментарии:

1. Ошибка типа: Выход из системы не является функцией. (В «Выход из системы(users.current.id)», «Выход из системы» не определен). И я меняю имя обработчика на const при выходе из системы

2. Извините , я пропустил что-то, чего не Logout было handleLogout(users.current.id) в вашем доме.tsx — > Общий заголовок> , это сделает работу

3. В другом комментарии кто-то поставил решение, чтобы изменить кнопку: onPress={()=> Функция выхода из системы} на onPress={()=>> Функция выхода из системы()}

4. Это тоже работает, но больше похоже на синтаксис, таким образом consta logountFunc = () => () => {...} , все зависит от того, как вы хотите с этим справиться:), приветствую!

Метки: