时间戳

首页 > 解决方案 > 如何通过比较 ReactJs 中的另一个数组来呈现数组值

javascript - 如何通过比较 ReactJs 中的另一个数组来呈现数组值

问题描述

我有一些来自道具的数组，如下所示

this.props.fruits= [
  {
    source: "Apple",
    code: 101,
  },
  {
    source: "banana",
    code: 105,
  },
  { source: "Mango",
    code: 107,
  },
];

在我的状态下，我必须保存代码仅用于将其发送到后端我的状态如下所示

this.state ={
   myfruits:[101,105]
}

我必须在渲染 DOM 元素的 DOM 元素示例中渲染 myfruits 名称

My Fruits : Apple , banana

标签： javascriptarraysreactjsrendering

解决方案

您可以组合使用filter、map和join来使其正常工作。

示例不是 React，而是向您展示了如何实现这一点。

const fruits = [
  {
    source: "Apple",
    code: 101,
  },
  {
    source: "banana",
    code: 105,
  },
  { source: "Mango",
    code: 107,
  },
];

const state = [101, 105];

const getFruitNames = () => fruits
  .filter(({ code }) => state.includes(code)) // Get all fruit objects where the code is also in state
  .map(({ source }) => source) // Only return the source (name)
  .join(", "); // Turn into a comma seperated string

console.log(`My Fruits: ${getFruitNames()}`);

推荐阅读