React函数组件for循环生成对象无法追加到useState数组的问题

问题原因 #

你遇到的不是作用域问题，是React状态更新的闭包陷阱+批量更新机制导致的：

• 你在axios的then回调里访问的propertyList，是requestInitialListings函数执行时闭包捕获的状态值，也就是你调用这个函数时的propertyList（初始是空数组）
• React的状态更新是异步批量处理的，你在for循环里连续调用10次setPropertyList，所有更新会在本轮事件循环结束后统一执行，每次更新用的都是最初的空数组做展开，所以最终状态只会保留最后一次更新的单个对象。

解决方案 #

方案1（更推荐，性能最优）：先处理完所有数据再一次性更新状态

不需要循环里反复调用setState，先把前10条数据处理成目标格式的数组，再一次更新即可：

const [propertyList, setPropertyList] = useState([])

function requestInitialListings(){
  axios.request(options).then(function (response) {
    const resultList = response.data.props
    // 先处理前10条，生成完整的目标数组
    const processedList = resultList.slice(0,10).map(currentProperty => ({
      'address': currentProperty['address'],
      'bathrooms': currentProperty['bathrooms'],
      'bedrooms': currentProperty['bedrooms'],
      'country': currentProperty['country'],
      'currency': currentProperty['currency'],
      'daysOnZillow': currentProperty['daysOnZillow'],
      'hasImage': currentProperty['hasImage'],
      'imgSrc': currentProperty['imgSrc'],
      'listingStatus': currentProperty['listingStatus'],
      'livingArea': currentProperty['livingArea'],
      'lotAreaUnit': currentProperty['lotAreaUnit'],
      'lotAreaValue': currentProperty['lotAreaValue'],
      'price': currentProperty['price'],
      'propertyType': currentProperty['propertyType'],
      'zpid': currentProperty['zpid'],
      'brokerageName': null,
      'propertyTaxRate': null,
      'zestimate': null,
      'rentZestimate': null,
      'associationFee': null,
      'hasHomeWarranty': null,
      'depositsAndFees': null,
      'hasAssociation': null,
      'hoaFee': null,
      'mortgageRates': {
        'armRate': null,
        'fifteenYearFixedRate': null,
        'thirtyYearFixedRate': null,
      },
      'mlsid': null,
      'listingAgent': null,
    }))
    // 一次性更新状态
    setPropertyList(processedList)
  }).catch(function (error) {
    console.error(error);
  });
}

方案2（如果确实需要逐次更新）：使用函数式更新获取最新状态

如果业务场景需要每次迭代都更新状态，就用setState的函数式写法，传入的回调能拿到上一次更新完成的最新状态，不会受闭包旧值影响，把你标记的代码行替换为：

setPropertyList(prevList => [...prevList, createdProperty])

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