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;

Answer 2

您可以使用嵌套的map()。我认为您不需要counter变量。

const displayData=(data)=>{
    return (
        data.map(x => 
           Object.keys(x).map((value, ids) => (
               <span key={ids}>{x[value]} </span>
           )
        )
     )
  }

Answer 3

const displayData = data => {
  return Object.keys(data).map(el => {
    return el.value;
  })
}

渲染对象React数组

3 个答案: