函数返回数据但不显示答案

【问题标题】：function returning data but not showing函数返回数据但不显示
【发布时间】：2018-09-15 07:41:05
【问题描述】：

我有这个组件

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 来自应用级别，

仅供参考，当我尝试使用开发工具对其进行调试时，该功能正在重新调整我正在寻找的文本。

【问题讨论】：

你有一个异步函数，这意味着数据不能作为你的 Promise 调用的返回值，但只有在它完成时才可用。你应该选择一个有状态的组件，在 componentwillmount 中获取数据，然后更新本地状态，然后渲染那个状态（前提是你的应用中没有其他可用的状态管理）
我有一个问题，如果我这样做是组件内部已经可用的道具将安装？

标签： reactjs api object

【解决方案1】：

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

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

那么你可以在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>
    ) 
  }
}

【讨论】：

【解决方案2】：

当事情在调试时运行但在运行时没有运行并且您按原样使用 Promise，99% 的时间是因为当您打印时 Promise 尚未解决。

localGetUserFromID 确实返回了一个解析为友好名称的承诺。

你可以在await前面加上localGetUserFromID(MainObject.AuthorId)然后重写你的返回值：

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

【讨论】：