如何将具有值的函数发送到子组件 React？
Posted
技术标签:
【中文标题】如何将具有值的函数发送到子组件 React？【英文标题】：How to send function with value to child component 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 的错误，但您的评论是正确的，谢谢
【参考方案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 = () => () => ... 这完全取决于你想如何处理它:)，问候！以上是关于如何将具有值的函数发送到子组件 React？的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 React-Router 和 React-Redux 将道具发送到子路由组件？