React中useState设置初始状态不生效始终返回空数组如何解决

问题原因 #

• useState的初始值仅在组件第一次挂载渲染时生效，后续即使你用来计算初始值的ProductDataSource发生变化，useState也不会自动同步更新状态。绝大多数情况下你遇到的问题是：组件第一次渲染时dataList本身就是空数组（比如dataList是异步请求返回的数据，第一次渲染时请求还没完成），所以初始值就被设为了[]。
• 另外你在setproductData之后立刻打印productData拿不到新值，是React状态更新的批量异步机制导致的，打印的是当前渲染周期的旧状态，不代表状态没有更新成功。

解决方案 #

1. 监听dataList的变化，数据更新后主动同步到productData状态中，将你的逻辑调整为如下写法：

// 初始值可以直接设为空数组
const [productData, setproductData] = useState([])

// 监听dataList变化，重新计算数据源并更新状态
useEffect(() => {
  const ProductDataSource = dataList.map((data, i) => {
    return {
      key: data.id,
      image: (
        <Zoom>
          <ImageIcon
            style={{ width: '100px', objectFit: 'cover' }}
            src={data.images ? [data.images[0].downloadURL] : []}
          />
        </Zoom>
      ),
      product: data.name,
      price: data.hourlyRate,
      description: data.desc,
      WeekRate: data.weeklyRate,
      status: data.isApproved == 1 ? 'Approved' : data.isApproved == 0 ? 'Rejected' : 'Pending',
      isArchived: data.isArchived ? 'true' : 'false',
      isSelling: data.isSell ? 'Selling' : 'Rental',
    }
  })
  setproductData(ProductDataSource)
}, [dataList])

2. 删除方法改用函数式更新写法，避免闭包捕获旧状态导致更新异常：

const handelDeleteProduct = (ind) => {
  setproductData(prevState => prevState.filter((item) => item.key !== ind))
}

3. 如果要验证状态更新结果，可以监听productData的变化打印：

useEffect(() => {
  console.log('更新后的productData：', productData)
}, [productData])

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