如何在打字稿中使用地圖內的屬性？

Question

我有一個對象，我想在其中訪問屬性。 當我輸入 list.activityType 時，我收到錯誤屬性“activityType”不存在於“string”類型。 我該如何解決這個問題？

  const renderSurveyItem = (
    items: SurveyActivityViewModel[]
  ): JSX.Element => {

    return (
      <div>
        {Object.keys(items).map((list) => (
          <div className="kpi" key={list}>
            <div className="item text-x"></div>
            <div className="item">
              <div className="kpi-name">{list.activityType}</div>
            </div>
          </div>
        ))}
      </div>
    );
  };

Answer 1

您正在對items中的屬性鍵的數組調用map 。 查看您的代碼，您只想在items本身上調用map ，使用它提供的項目及其索引（鍵）：

const renderSurveyItem = (
  items: SurveyActivityViewModel[]
): JSX.Element => {
  return (
    <div>
      {items.map((item, index) => (
        <div className="kpi" key={index}>
          <div className="item text-x"></div>
          <div className="item">
            <div className="kpi-name">{item.activityType}</div>
          </div>
        </div>
      ))}
    </div>
  );
};

請注意，我將list更改為item ，如果項目確實是列表（它們的類型表明它們不是）並且list更有意義，那么您沒有理由不能將其更改回來。

---

請注意，通常不建議使用數組索引作為key ，文檔中的詳細信息。 對於條目永遠不會移動或刪除的數組，這很好，但否則您想使用對象本身固有的一些唯一標識符 ( item )，而不是它在數組中的位置。