React类组件中UpdatedStatus数组状态不可迭代问题求助

核心错误：错误的状态解构方式 #

你在render里的这行代码写错了：

const {UpdatedStatus} =this.state.UpdatedStatus;

this.state.UpdatedStatus是你初始化的数组，你却用对象解构语法（{}）去解析它，这会导致UpdatedStatus变量变成undefined——因为数组里不存在名为UpdatedStatus的属性。后续在点击事件里尝试用[...UpdatedStatus]展开一个undefined，自然会抛出“不可迭代”的错误。

修复步骤 #

1. 修正状态解构
   把错误的解构代码改成直接从state中取值：

   render() {
       const { BookedServices, UpdatedStatus, Details } = this.state;
       return (
           <React.Fragment>
               <div className="page-content">
                   {/* 其他代码 */}
               </div>
           </React.Fragment>
       );
   }
   

2. 修正setState后的异步日志问题
   你在点击事件里的console.log(this.state.UpdatedStatus.id)有两个问题：

   • setState是异步操作，直接打印this.state拿不到刚更新的值；
   • UpdatedStatus是数组，本身没有id属性，你应该打印整个数组或者数组里的元素。
     可以改成用setState的回调函数获取最新状态，同时用prevState确保拿到更新前的数组：

   <Button 
       color="primary"
       size="sm"
       className="btn-pill mx-2"
       onClick={() => {
           this.setState(
               prevState => ({
                   UpdatedStatus: [...prevState.UpdatedStatus, { BookedServiceStatus: "Accepted", id: item.id }]
               }),
               () => {
                   console.log(this.state.UpdatedStatus);
                   // 若要打印最后一个元素的id：
                   // console.log(this.state.UpdatedStatus.at(-1).id);
               }
           );
       }}
   >
       Accept
   </Button>
   

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