如何在JSX中从包含对象的数组输出所有元素？

你的数组外层是一个仅包含单个对象的数组，之前的写法只输出第一个元素，是因为你遍历的是外层数组的索引（只有0），而非内部对象的所有属性值。以下是几种可行的解决方法：

方法1：使用Object.values遍历对象值 #

先通过外层map拿到数组内的对象，再用Object.values提取对象的所有值组成新数组，最后遍历这个数组输出元素：

function App() {
  const arr = [{ "0": "First Item", "1": "Second Item", "2": "Third Item"}];
  
  return (
    <div className="App">
      {arr.map((obj, outerIdx) => 
        Object.values(obj).map((text, innerIdx) => (
          <p key={`${outerIdx}-${innerIdx}`}>{text}</p>
        ))
      )}
    </div>
  );
}

方法2：使用Object.keys遍历对象键 #

通过Object.keys获取对象的所有键，再根据键拿到对应的值：

function App() {
  const arr = [{ "0": "First Item", "1": "Second Item", "2": "Third Item"}];
  
  return (
    <div className="App">
      {arr.map((obj, outerIdx) => 
        Object.keys(obj).map((key) => (
          <p key={`${outerIdx}-${key}`}>{obj[key]}</p>
        ))
      )}
    </div>
  );
}

方法3：使用for...in循环收集元素 #

如果习惯用for循环，可以先收集所有要渲染的元素，再在JSX中输出：

function App() {
  const arr = [{ "0": "First Item", "1": "Second Item", "2": "Third Item"}];
  const renderItems = [];
  const targetObj = arr[0];
  
  for (const key in targetObj) {
    renderItems.push(<p key={key}>{targetObj[key]}</p>);
  }
  
  return (
    <div className="App">
      {renderItems}
    </div>
  );
}

注意点 #

• JSX列表渲染必须给每个元素添加唯一的key属性，避免React警告；
• 不要用forEach，因为它没有返回值，无法直接生成JSX元素数组。

内容的提问来源于stack exchange，提问作者Steve