如何将JSON对象存为数组并传递给React组件（不使用setState）

我懂你遇到的困扰了——想用fetch从API拉取数据给组件，不想用硬编码数组，也不想修改组件内部代码、不用setState，但直接写的话组件拿到的却是空数组对吧？

问题核心在于fetch是异步操作，你原来的代码里，render是在fetch还没拿到数据的时候就执行了，这时候PRODUCTS还是初始的空数组，组件自然接不到有效数据。

给你两个完全符合你要求（不修改组件、不用setState）的解决方案：

方案一：把渲染逻辑放在fetch的回调里 #

等数据完全获取并赋值后，再执行渲染操作，这样组件拿到的就是完整的产品数据了：

var PRODUCTS = [] 
fetch('https://api.myjson.com/bins/10scuq') 
  .then(res => res.json()) 
  .then(data => {
    PRODUCTS = data
    const container = document.getElementById('root')
    render(
      <FilterableProductTable products={PRODUCTS}/>, 
      container
    )
  })

方案二：用async/await让代码更直观 #

用自执行异步函数包裹逻辑，等待fetch完成后再渲染，可读性更好：

(async function() {
  const res = await fetch('https://api.myjson.com/bins/10scuq')
  const PRODUCTS = await res.json()
  const container = document.getElementById('root')
  render(<FilterableProductTable products={PRODUCTS}/>, container)
})()

这两种方法都是确保数据准备好之后再把它传给组件，组件就能正常接收到完整的产品列表了。

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