没有从我的 for() 迭代我的整个数组

Question

我正在用 React 编写一个应用程序，同时我正在尝试一些新的 ECMA 17 功能，试图更加熟悉一些。最初在父组件中，我使用 Map() 为数组中的每个索引迭代一个新的 div。

对于一个虽然是 Map 组件的子组件的新组件，我想我会使用 for (){} 格式的 Object.enteries() 而不是 Map。我以为我可以简单地 return 这样的值，但它只是部分有效。

我遇到的问题是它只会遍历数组的第一个索引。它仅控制台日志和 returns 数组中第一个索引的 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;

它最后只控制数组的第一个索引和值。我注意到虽然第一个控制台日志是...
[] "here here"
这意味着在我的 const 和 return () 之前 console.log 在任何父组件之前首先起作用。我的问题是我此时需要使用 componentWillMount() 吗？显然它仍然有效，因为当我点击 div 时它传递了第一个索引，所以我认为异步在这里没有发挥作用......但我仍然是新手......我已经站起来了还是在这里尝试一下...

为什么我只遍历数组的第一个索引而不是第二个索引？是我的 for() 吗？（也许我的代码不足以提供帮助..数据不足，无法提供有意义的答案）（抱歉啰嗦..）

Answer 1

您的代码存在问题，当 for 到达第一个 return 时，不会继续绘制其他 div。

基本上，当您调用 return 时，渲染函数将在那里完成。与地图的不同之处在于，当他们映射时，它 return 是 child。

你所做的基本上是这样的：

if (true) {
  return 'Something';
}

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

for循环也是如此

没有从我的 for() 迭代我的整个数组

Not iterating over my entire array from my for()

arrays

reactjs

object

for-loop

ecmascript-next