大佬教程收集整理的这篇文章主要介绍了如何将带值的函数发送到子组件 React？ 已编辑，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
实际上，在我的 React 原生应用程序中，我在 logout 函数中将 ID 值从父视图发送到子组件时遇到问题，我不知道如何将值发送到函数中；实际上我有下一个控制台错误：
警告：无法从不同组件的函数体内部更新组件。
和
TypeError: null is not an object (evaluaTing 'users.current.ID')
我的简历代码是下一个（Home 是父级，General@R_502_5548@ 是子级）：
Home.tsx（我可以看到在控制台中打印了正确的字符串值（users.current.ID））
@H_674_24@import React from 'react'
import {Text,Container,Content,VIEw} from 'native-base'
import Styles from './Styles/HomeStyles'
import {Connect} from 'react-redux'
import General@R_502_5548@ from '../Components/General@R_502_5548@'
import {Auth} from '../services/Auth/Authservice'
const Home =(props) => {
const {navigation,users} = props;
return(
<Container >
{Console.log(users.current.ID)}
<General@R_502_5548@ 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);
General@R_502_5548@.tsx
@H_674_24@import React,{useStatE} from 'react'
import {Button,@R_502_5548@,Body,title,left,Right,Icon,Card,CardItem,Text,Fab} from 'native-base'
const General@R_502_5548@=(props)=>{
const {BACkbutton,title,morebutton,logoutFunc} = props;
return(
<>
<@R_502_5548@>
{
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
}
</@R_502_5548@>
</>
);
}
export default General@R_502_5548@;
const Logout = (id:string)=>async ()=>{
await Auth.LogoutUser(id,props);
navigation.navigate('Login');
}
<Button transparent onPress={logoutFunc}>
,
我从未使用过 React Native，但我尝试过使用 react。 不知道你为什么要这样做，但如果你想处理这种行为，我建议使用一个返回函数的函数......类似：
如果允许使用 ECMA 脚本 6 语法：
const handleLogout = (id:string) => async () => {
await Auth.LogoutUser(id,props);
navigation.navigate('Login');
};
...
Home.tsx 保持不变
@H_674_24@<GeneralHeader BACkButton={falsE} moreButton={truE} title={"Home"} logoutFunc={handleLogout(users.current.id)}/>
GeneralHeader.tsx 更改为
@H_674_24@<Button transparent onPress={logoutFunc}>
<Icon name='menu' />
</Button>
让我知道这是否有效！
以上是大佬教程为你收集整理的如何将带值的函数发送到子组件 React？ 已编辑全部内容，希望文章能够帮你解决如何将带值的函数发送到子组件 React？ 已编辑所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。