[英]onClick not rendering a different react component
I've created a SocialShare component which I want to render when Share button is clicked on any of my other components. 我已经创建了一个SocialShare组件,当我在任何其他组件上单击“共享”按钮时,都希望呈现该组件。
import React, {Component} from 'react';
import {View, Share, Button} from 'react-native';
export class SocialShare extends Component {
onShare = async () => {
try {
const result = await Share.share({
message:
'React Native | A framework for building native apps using React',
});
if (result.action === Share.sharedAction) {
if (result.activityType) {
// shared with activity type of result.activityType
} else {
// shared
}
} else if (result.action === Share.dismissedAction) {
// dismissed
}
} catch (error) {
alert(error.message);
}
};
render() {
return (
this.onShare()
);
}
}
This is how I am calling this component from another component: 这就是我从另一个组件调用此组件的方式:
<View>
<Button onClick={() => this.onShareButtonClick()}>Button</Button>
{this.state.showShareComponent ?
<SocialShare /> :
null
}
</View>
onShareButtonClick function: onShareButtonClick函数:
onShareButtonClick(){
this.setState({
showShareComponent: !this.state.showShareComponent,
})
}
On click of button, this is the error I am getting: 单击按钮时,这是我得到的错误:
Invariant Violation: Objects are not valid as a React child (found: object with keys {_40, _65, _55, _72}). If you meant to render a collection of children, use an array instead.
in SocialShare
What's wrong with my code? 我的代码有什么问题?
Edit: As per suggestions, modified my SocialShare class to this: 编辑:根据建议,将我的SocialShare类修改为:
import React, {Component} from 'react';
import {View, Share, Button} from 'react-native';
export class SocialShare extends Component {
constructor(props) {
super(props);
this.state = {
asyncCompleted: false,
};
}
onShare = async () => {
try {
const result = await Share.share({
message:
'React Native | A framework for building native apps using React',
}).then(
this.setState({asyncCompleted: true})
);
if (result.action === Share.sharedAction) {
if (result.activityType) {
// shared with activity type of result.activityType
} else {
// shared
}
} else if (result.action === Share.dismissedAction) {
// dismissed
}
} catch (error) {
alert(error.message);
}
};
render() {
return (
<View>
{this.state.asyncCompleted ? this.onShare() : null}
</View>
);
}
}
Now, nothing happens on click of button from my other class. 现在,单击我其他班级的按钮时,什么也没有发生。
Seems to me like the main issue is that your render method is attempting to render a promise directly, as would be returned by the asynchronous onShare()
method. 在我看来,主要问题是您的render方法正在尝试直接渲染承诺,就像异步
onShare()
方法返回的onShare()
。 Instead, you should make the asynchronous code update the component's state, which can then trigger a render that will be based on this state value rather than the direct output of onShare()
相反,您应该使异步代码更新组件的状态,然后可以触发基于该状态值而不是
onShare()
的直接输出的onShare()
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.