javascript - React 对象的渲染数组

Question

我正在渲染对象数组中的值。我做了一个计数器来计算数组中有多少个对象要循环所有对象，但它只循环一次。我知道在我返回后，功能会中断，但我不知道如何以其他方式执行此操作。检查我的沙箱，我重新创建了我的问题 https://codesandbox.io/s/goofy-easley-w5rrg

  const displayData=(data)=>{
    let counter = 0
    for (let i = 0; i < data.length; i++) {
      if (counter <= data.length+1) {
        counter++ 
        return Object.keys(data[i]).map((value,ids)=>{
              return <span key={ids}>{data[i][value]} </span>
           })
        }
      }

  }

Answer 1

将所有 JSX 值保存到一个数组中并返回:

let result = [];
// ...
result.push(Object.keys(data[i]).map(...));
// ...
return result;