对象在反应渲染中作为 React 子级无效（找到：[object Promise]）

Question

我有一个基于类的 React 组件。 这是一个子组件，state 来自另一个父组件。 这是 JSX，它位于 map function 内。 在 map function 里面，有一个很大的 JSX 代码，但我只放了相关部分。

{platformsList.map((item, index) => (
{item.platform_id ? (
<div>
   {this.getSelectedProfiles(item.platform_id)}
</div>)) : ''}

对应的function写在render方法上面。 这里的响应是 Object：

getSelectedProfiles = async(id) => {
    const token = Cookie.get('user-token');
    const headers = {
      'Content-Type': 'application/json',
      authorization: token,
    };
    // Axios request  
    let response = await axios.get(`http://localhost:9999/profiles/${id}`, { headers: headers });
    console.log(response);
    return 'kkk';
  }

它显示的错误消息是：错误：对象作为 React 子项无效（找到：[object Promise]）。 如果您打算渲染一组子项，请改用数组。

因为，这是一个子组件，我不想存储在 React 的 state 中。 我想执行这个组件。 有没有办法不将其存储在 state 中。 我是 React 新手，不知道我在哪里做错了。

Answer 1

异步 function 返回 promise，它不会立即执行并返回值（在本例中为'kkk' ）。 似乎也没有任何理由getSelectedProfiles是异步的，因此只需将其删除并使其同步即可。

  getSelectedProfiles = (id) => {
    return 'kkk';
  }

Answer 2

您需要await function 调用的结果：

render () {
  const getSelectedProfiles = async(id) => {
    return 'kkk';
  }
  const selectedProfiles = await getSelectedProfiles(item.platform_id);

  return {item.platform_id ? (
    <div>
     {selectedProfiles}
    </div>) : ''}

但是，这具有async阻塞的缺点。 如果getSelectedProfiles()中的异步操作长时间运行（例如网络请求），您的渲染将挂起。 在这种情况下，您必须改为设置组件的 state。