this.setState( ) 不能更新ui

問題

需求是通過點擊事件來顯示一個組件，組件中請求數(shù)據(jù)，然后渲染，現(xiàn)在的問題是，點擊以后組件可以展現(xiàn)，但是數(shù)據(jù)拿到以后通過this.setState不能更新ui？
**

代碼

**

父組件
<span
    onClick={this.handleClick}
    style={this.state.style}
>
    {this.props.children}
    {
      // 通過handleClick改變this.state.show為true顯示Popover組件；
      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>
    );
  }
}

下面是debug內(nèi)容

可以看到數(shù)據(jù)都是正確拿到了，this.state.content的值也改變了，但是沒有更新ui