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

Question

我有一些来自道具的数组，如下所示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

Answer 1

您可以结合使用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()}`);

Answer 2

您可以结合使用 filter 和 map 方法，

this.props.fruits.filter((fruit) => this.state.myfruits.includes(fruit.code))
          .map((fruit) => fruit.source)