requirement is to display a component by clicking on the event, requesting data in the component, and then rendering. The problem now is that the component can be displayed after clicking, but the ui? cannot be updated through this.setState after the data is obtained.
* *
* *
<span
onClick={this.handleClick}
style={this.state.style}
>
{this.props.children}
{
// handleClickthis.state.showtruePopover;
this.state.show ? <Popover text={text}/> : null
}
</span>
class Popover extends React.Component {
constructor(props) {
super(props);
this.state = {
content: "",
};
console.log("props: " + this.props.text);
}
componentDidMount() {
hasTranslation(this.props.text).then((res) => {
if(res.hasTranslation) {
console.log("meanings: " + res.meanings);
this.setState({
content: res.meanings,
}, () => {
console.log("new state: " + this.state.content);
})
}
});
}
render() {
return (
<div
style={{
position: "absolute",
top: "100",
left: "100",
}}
>
{
//ui
this.state.conent ? this.state.content : null
}
</div>
);
}
} the following is the debug content
you can see that the data has been obtained correctly and the value of this.state.content has changed, but ui
has not been updated.