Не перебирать весь мой массив из моего for()

avatar
SMW
8 апреля 2018 в 07:20
54
1
0

Я пишу приложение на React, тем временем я экспериментировал с некоторыми новыми функциями ECMA 17, пытаясь немного познакомиться с ними. Первоначально в родительском компоненте я использовал Map() для перебора нового div для каждого индекса в моем массиве.

Для нового компонента, хотя и дочернего по отношению к компоненту Map, я решил использовать Object.enteries() с использованием формата for(){} вместо Map. Я думал, что могу просто вернуть значения таким образом, однако это работает только частично.

Проблема, с которой я сталкиваюсь, заключается в том, что он будет перебирать только первый индекс моего массива. Он только записывает консоль и возвращает div первого индекса в массиве. Я совершенно не понимаю, почему это работает лишь частично.

import React from 'react';

const InnerCard = (props) => {
    // const myInnerOptions = 
    const myInnerOptions = props.cardSelected  
    for (let [key, value] of Object.entries(myInnerOptions)) {
        console.log(`key: ${key} Card Value: ${value} this is from 
          InnerCards.js`);
        return (
            <div key={key}>inside innerCard: {value}</div>
        )
     }  /*  NOTE  at this point I am having a problem. 
          // thos will only print 1 div   it will only  push the first key  
          //   div out  not the second.  props should be pushing an array of 
               2 items up.  */

     console.log(props.cardSelected, 'here here');
         //for (let [key, value] of Object.entries())

     return (
         <div>{myInnerOptions}</div>

     );
 }

 export default InnerCard; 

в конце выводит только первый индекс и значение массива. Я заметил, что самый первый журнал консоли...
[] "здесь здесь"
что означает, что между моим const и перед return() этот console.log действует первым перед любым из родительских компонентов. Моя проблема в том, что мне нужно использовать componentWillMount() на этом этапе? Очевидно, что это все еще работает, так как когда я нажимаю на div, он передает первый индекс, поэтому я думаю, что асинхронность здесь не играет роли ... но я все еще такой зеленый рог, что ... Я остановился здесь, пытаясь понять понять ...

почему я просматриваю только первый индекс массива, а не второй? Это мой for()? (возможно, моего кода недостаточно, чтобы помочь.. недостаточно данных для осмысленного ответа) (извините, многословно..)

Источник

Ответы (1)

avatar
glrodasz
8 апреля 2018 в 07:29
0

Проблема с вашим кодом заключается в том, что когда for достигает первого возврата, он не собирается продолжать рисовать другие элементы div.

В основном, когда вы вызываете return, функция рендеринга завершается там. Разница с картой в том, что она возвращает дочерний элемент после сопоставления.

В основном вы делаете следующее:

if (true) {
  return 'Something';
}

// Any coding at this point is not going to be executed.

То же относится и к циклу for.

SMW
8 апреля 2018 в 07:32
0

.. поэтому я перебираю первый массив, а затем. поп. Готово. Я исходил из примера, который, как мне казалось, имел отношение к тому, что я пытался сделать. Однако этот пример должен был быть предназначен только для возврата, если он верен. const cars = {BMW: 3, Tesla: 2, Toyota: 1}; for (let [key, value] of Object.entries(cars)) { console.log(key: ${key} value: ${value} ) } То, что for() означает, что оно срабатывает один раз, верно, тогда это отличается от каждого цикла? по сути, я должен просто вернуть метод Map(), тогда да? то, что я пытаюсь сделать, не для for()

glrodasz
8 апреля 2018 в 07:44
0

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

SMW
8 апреля 2018 в 07:47
0

Спасибо. Я уже только что сделал `const myInnerOptions = props.cardSelected.map((cardSelected, index) => { return ( <div key={cardSelected.toString() + 'aaa'} onClick={() => this.clickHandler( index)}> card {cardSelected} и index {index} </div> ); })` Map() это так. просто пробовать что-то новое и постоянно терпеть неудачи... лучший способ обучения, я полагаю. Благодарю. (надо разобраться с этим кодом комментария в будущем... глаза болят.