如何在JSX中添加逻辑将接口返回的单个对象转换为数组适配渲染

方案1：存入state时统一转换为数组（推荐） #

直接在fetch拿到返回值更新状态的环节做类型判断，把非数组格式统一转成数组，后续所有用到items的逻辑都不需要再额外兼容：

const [items, setItems] = useState([])

fetch('https://jsonplaceholder.typicode.com/users/')
  .then(response => response.json())
  .then(json => {
    // 类型判断：是数组直接用，不是的话包裹为单元素数组
    const formattedData = Array.isArray(json) ? json : [json]
    setItems(formattedData)
  })    

这种场景下你原来的渲染代码不需要做任何修改，直接沿用原有map逻辑即可。

方案2：在JSX渲染环节做转换 #

如果你不想修改状态更新的逻辑，也可以在渲染遍历前做临时转换：

return (
  <div className="App">
    { 
      // 遍历前先统一转成数组
      (Array.isArray(items) ? items : [items]).map(item => {  
        return <pre> {JSON.stringify(item)}</pre>
      })
    }
  </div>
);

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