React状态中对象数组值修改失效：日期转换及数值变更无效果

问题根源 #

API请求是异步操作，UserService.getExpense(userId)的回调会在后续事件循环才执行，但你在回调外执行的setState会先运行——这时候this.state.Expenses还是初始化的空数组，map操作自然没效果。不管是转换date格式还是翻倍amount，只要操作时机不对（数据还没拿到），就不会生效。

正确解决方法 #

方案1：获取数据后直接处理再存入state

最直接高效的方式，在API回调里拿到返回数据后，先完成格式转换、数值计算，再更新state：

componentDidMount(){
  UserService.getExpense(userId).then((res) =>{
    // 对返回的数据进行处理：转换date为Date对象，amount翻倍
    const processedExpenses = res.data.map(expense => {
      return {
        ...expense,
        date: new Date(expense.date),
        amount: expense.amount * 2
      };
    });
    this.setState({ Expenses: processedExpenses });
  });
}

方案2：使用函数式更新（适用于依赖旧state的场景）

如果需要先存储原始数据，再基于已有state做修改，要使用setState的函数式更新——因为setState本身是异步的，直接读取this.state可能拿到未更新的旧值：

componentDidMount(){
  UserService.getExpense(userId).then((res) =>{
    // 先存入原始数据
    this.setState({ Expenses: res.data }, () => {
      // 在setState的回调中确保state已更新，再处理数据
      this.setState(prevState => ({
        Expenses: prevState.Expenses.map(expense => ({
          ...expense,
          date: new Date(expense.date),
          amount: expense.amount * 2
        }))
      }));
    });
  });
}

注：方案2会触发两次state更新，非必要优先用方案1。

关键注意事项 #

• 所有依赖API返回数据的操作，必须放在请求的回调（then/catch）或await之后执行，确保数据已获取。
• 避免在异步请求外直接操作初始空state，此时数组还没有有效数据，任何map、filter操作都不会产生预期结果。

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