Блог

Главная - Вопросы по программированию - Как мне отобразить значение массива путем сравнения другого массива в ReactJS

Как мне отобразить значение массива путем сравнения другого массива в ReactJS

#javascript #arrays #reactjs #rendering

#javascript #массивы #reactjs #визуализация

Вопрос:

У меня есть определенный массив из реквизитов, который приведен ниже

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

в моем состоянии я должен сохранить код только для отправки его на сервер, мое состояние приведено ниже

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

Я должен отобразить имя myfruits в элементе DOM
пример рендеринга элемента DOM

 My Fruits : Apple , banana

Ответ №1:

Вы могли бы создать комбинацию filter, map и join, чтобы заставить это работать.

Пример не реагирует, но показывает, как этого можно достичь.

 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()}`);

Комментарии:

1. .метод join(«, «) не работает при рендеринге, он возвращает как [object, object] .. есть ли какое-либо решение

2. @Sanjaikumar Это означает, что элементы, к которым вы присоединяетесь, являются объектами. Вам нужно только вернуть имя, которое вы хотите показать, если у вас есть еще какой-то код, я могу попытаться его отладить.

Ответ №2:

Вы можете использовать комбинацию метода filter и map,

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

Это должно решить вашу проблему. Вы можете прочитать больше о map и filter здесь .