我如何通过比较 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 stringconsole.log(`My Fruits: ${getFruitNames()}`);

Answer 2

您可以结合使用 filter 和 map 方法，this.props.fruits.filter((fruit) => this.state.myfruits.includes(fruit.code))           .map((fruit) => fruit.source)