Блог

Главная - Вопросы по программированию - Как выполнить итерацию по объекту с компонентом в redux

Как выполнить итерацию по объекту с компонентом в redux

#reactjs #ecmascript-6 #redux

#reactjs #ecmascript-6 #redux

Вопрос:

Я хочу отобразить объект и передать значения в качестве реквизита

Я работаю над проектом redux, изначально у меня был массив объектов, поэтому перебирать их было проще, но меня попросили преобразовать мое начальное состояние в объект js, но мне сложно провести его рефакторинг

 // Original State
lists = [
  {
    id: 0,
    title: "List1",
    cards: [
      {
        id: 0,
        title: "card1",
        user: "ali"
      }
    ]
  },
  {
    id: 1,
    title: "List2",
    cards: [
      {
        id: 1,
        title: "card1",
        user: "ahmed"
      },
      {
        id: 2,
        title: "card2",
        user: "khalid"
      }
    ]
  }
];

// This is where I map over the card and send the values as props
cards.map(card => (
  <TodoCard
    key={card.id}
    title={card.title}
    listId={listId}
    cardId={card.id}
    user={card.user}
  />
));

Код работает нормально, но как мне выполнить итерацию, если массив преобразуется в объект js, приведенный ниже

 lists = [
  {
    id: 0,
    title: "List1",
    cards: {
      cardDetail: {
        id: 0,
        title: "card1",
        user: "ali"
      }
    }
  },
  {
    id: 1,
    title: "List2",
    cards: {
      cardDetail: [
        {
          id: 1,
          title: "card1",
          user: "ahmed"
        },
        {
          id: 2,
          title: "card2",
          user: "khalid"
        }
      ]
    }
  }
];

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

1. Второй пример кода с объектом JS имеет недопустимый синтаксис. Вам нужны имена свойств для вложенных объектов. Кроме того, если у вас есть правильный объект JS, вы можете перебирать значения, используя Object.values

2. можете ли вы предоставить мне пример того, как должен выглядеть второй пример… я не совсем понял @PatrickHund

3. Эртан опередил меня 😊

4. Ха-ха … все в порядке… теперь мой вопрос более разумный?

5. 🤔 почти готово, но имена свойств должны быть разными, вы не можете использовать listDetails и cardDetails несколько раз. В любом случае, я понимаю проблему, и мой совет для вас — по-прежнему использовать Object.values

Ответ №1:

Вы просто не можете сделать это так. Вам либо нужно использовать 

 list = [{object}, {object}];
//or
list = {myList: [{object}, {object}]}

Вы не можете просто написать

 list = {{object}, {object}}

поскольку его недопустимый синтаксис.

Посмотрите, что такое и как вы можете использовать объекты и массивы

https://www.w3schools.com/js/js_objects.asp

https://www.w3schools.com/js/js_arrays.asp

Ответ №2:

   cards:{ 
          cardDetail:
         {
          id:1,
          title:"card1",
          user:"ahmed"
         },
         {
          id:2,
          title:"card2",
          user:"khalid"
         }
        }
  }

Вы можете выполнить итерацию, используя Object.keys() которую, чтобы получить весь ключ, а затем выполнить forEach .

 Object.keys(cards).forEach((key,index) => {
    // key: the name of the object key....    cardDetail here
    // index: the ordinal position of the key within the object 
// value : cards[key]... value of the object.


});

Вам также нужно будет выполнить цикл value : cards[key] , поскольку он содержит несколько объектов, что кажется неэффективным, поэтому лучше было бы спроектировать объект данных, если это возможно