Question

我有这个组成部分

const SummaryBar = props => {
  const { MainObject} = props;

  const localGetUserFromID = userID => {
    getEmailFromId(userID).then(results => {
      return results.data.Title; //Comment: This one returning friendly name
    });
  };

     return (<span>Hello {localGetUserFromID(MainObject.AuthorId)}</span>)
}

但是当我以某种方式渲染它时，它仅显示Hello而不是我从localGetUserFromID函数获取的输出。我做错了吗？请注意，AuthorId正在传递给API，MainObject来自应用程序级别，

仅供参考，当我尝试使用开发工具进行调试时，该功能会重新调整我要查找的文本。

Answer 1

localGetUserFromID()不返回任何内容，即undefined，这就是为什么只看到Hello的原因。

并且因为localGetUserFromID()进行了异步调用以从用户ID获取电子邮件，所以它不必采用render()方法。现在，此组件已定义为无状态组件，但是您可以将其重新定义为有状态组件，在getEmailFromId()生命周期方法中调用componentDidMount()，并使用返回值作为内部状态。

然后您可以在Hello之后显示内部状态的值。

class SummaryBar extends Component {
  // Skipping prop type definition.

  constructor(props) {
    super(props)

    this.state = {
      username: '',
    }
  }

  componentDidMount() {
    const { MainObject: { AuthorId } } = this.props
    getEmailFromId(AuthorId).then((results) => {
      this.setState({
        username: results.data.title,
      })
    }) 
  }

  render() {
    const { username } = this.state
    return (
      <span>
        Hello { username }
      </span>
    ) 
  }
}

Answer 2

当事情在调试时运行而不是在运行时运行并且您按原样使用诺言时，99％的情况是因为在打印时诺言尚未得到解决。

localGetUserFromID确实返回一个承诺，将其解析为友好名称。

您可以将await放在localGetUserFromID(MainObject.AuthorId)前面，然后重写您的返回内容：

return (<span>Hello {await localGetUserFromID(MainObject.AuthorId)}</span>)

函数返回数据但不显示

2 个答案: