функция, возвращающая данные, но не показывающая

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

Когда что-то запускается при отладке, а не во время выполнения, и вы используете обещания в том виде, в каком вы есть, в 99% случаев это происходит потому, что обещания не были разрешены при печати. ​​

localGetUserFromID действительно возвращает обещание, которое разрешается на понятное имя.

Вы можете просто добавить await к localGetUserFromID(MainObject.AuthorId) и переписать, чтобы вы вернулись следующим образом:

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

Answer 2

localGetUserFromID() ничего не возвращает, то есть undefined, и поэтому вы видите только Hello.

И поскольку localGetUserFromID() делает асинхронный вызов для получения электронного письма с идентификатором пользователя, он не обязательно должен быть в методе render(). Теперь этот компонент определен как компонент без состояния, но вы можете переопределить его как компонент с состоянием, вызвать метод жизненного цикла getEmailFromId() in 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>
    ) 
  }
}