在 React 中使用 Arrays in Arrays 循环渲染

Question

我有一个数组，里面有数组，看起来像这样：[Array(4), Array(4), Array(1)]

而且我想 return 对每个数组进行相同的渲染，我尝试了这样的操作：

const articleRender = (array) => {
var index = 0;
var arrayLength = array.length;
for (index; index < arrayLength; index++) {
  return (
    <div>
      {array[index].map((item, i) => {
        return <li key={i}></li>;
      })}
    </div>
  );
}

但循环只进行一次迭代。

谢谢大家

Answer 1

您应该将所有数组迭代包装在 return 中。

const articleRender = (array) => {
  return (
    <div>
      array.map((item, index) => {
        return (<div>
          {item.map((subitem, i) => {
            return <li key={i}></li>;
          })}
        </div>
      )})
    </div>
  );
}

Answer 2

因为 return 在迭代的第一个循环上。

for (index; index < arrayLength; index++) {
  return ( <--- This return is stopping the iteration at index = 0.
    <div>
      {array[index].map((item, i) => {
        return <li key={i}></li>;
      })}
    </div>
  );
}

在 React 中使用 Arrays in Arrays 循环渲染

Loop rendering with Arrays in Array in React

arrays

render

reactjs