對象在反應渲染中作為 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。