在反应中混合2个对象答案

【问题标题】：Mixing 2 objects in react在反应中混合2个对象
【发布时间】：2021-12-26 13:17:46
【问题描述】：

我有 2 个对象：

const bag = { eth: 50, btc: 30, kla: 10, set: 5, ova: 5 };
const assetList = {
  eth: {
    name: "Ethereum",
    icon: "urlhere",
    colour: "#030",
    text: "light",
  },
  btc: {
    name: "Bitcoin",
    icon: "urlhere",
    colour: "#000",
    text: "dark",
  },
};

现在我想结束：

    <ul>
      {Object.keys(bag).map(function (asset, keyIndex) {
        return (
          <li>
            {assetList[asset].name}
          </li>
        );
      })}
    </ul>

我正在尝试像在 python 中那样处理这个问题，但这显然行不通。如何在此处获取响应资产的名称？

【问题讨论】：

它工作正常，除了你会得到bag 中那些不在你的assetList 中的键的错误。除了键之外，您没有在 bag 中使用任何东西，所以为什么不映射到 assetList 的键/值而不是>

标签： javascript reactjs object

【解决方案1】：

使用三元来检查asset 是否存在于assetList 中。如果不返回null。

const Demo = ({ bag, assetList }) => (    
  <ul>
    {Object.keys(bag).map(asset => assetList[asset] ? (
      <li key={asset}>
        {assetList[asset].name}
      </li>
    ) : null)}
  </ul>
);

const bag = { eth: 50, btc: 30, kla: 10, set: 5, ova: 5 };
const assetList = {"eth":{"name":"Ethereum","icon":"urlhere","colour":"#030","text":"light"},"btc":{"name":"Bitcoin","icon":"urlhere","colour":"#000","text":"dark"}};

ReactDOM.render(
  <Demo bag={bag} assetList={assetList} />,
  root
);

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

<div id="root"></div>

【讨论】：

谢谢你，拯救了我的 n00b 一天！ :)
哈哈。别客气。我很高兴你的 n00bness 得救了 :)