Javascript 为什么会这样？

我有两个React组件，一个是在单击按钮时创建一个新数组，然后通过一个函数将该数组发送到另一个映射并输出项目符号列表的组件。但是第二个组件不是为数组中的每个项目显示项目符号，而是将它们混合在一起

第一部分功能：

export default class SvcList extends React.Component {
   constructor(props) {
   super(props)

   this.state = {
      servicesArr: []
   }
 }

  changeSelectionsArray = (id) => {  
    this.state.servicesArr.push(id)
    // THIS IS THE FUNCTION SENDING THE ARRAY TO SECOND COMPONENT
    this.props.reviseServicesArray(this.state.servicesArr)  
  }

  render() {
    return(
      <div><button id="something" onClick={() => this.changeSelectionsArray(id)}>Click Me</button></div>
    )  
  }
}

因此，我通过道具将这个数组带到我的第二个组件，当我在console.log中记录道具时，我得到的是上面所示的精确数组。这是第二个组成部分：

["5bd97355-50d8-4a06-aced-025c8cc587f3", "5bd97403-ae5b-4c90-92cb-130f86154e27"]

export default class SvcDisplay extends React.Component {
   constructor(props) {
   super(props)
  }     

 render() {

  const { servicesArr } = this.props;

  const serviceDisplay = servicesArr.map((item, i) => (
    <li key={i}>{item}</li>
  ));

    return(
      <div>
        <ul>{serviceDisplay}</ul>      
      </div>  
    )  
  }
}

而不是单独的子弹。如果我将这一行添加到贴图函数上方的第二个组件渲染函数中，它将非常有效：

施工服务R=[“5bd97355-50d8-4a06-aced-025c8cc587f3”，“5bd97403-ae5b-4c90-92cb-130f86154e27”]

---

为什么会发生这种情况？？？？

因为这个.state.array.push（）语法错误。 此外，如果要使用更新状态，则需要使用setState之后的回调

changeSelectionsArray = (id) => {  
    let { servicesArr } = this.state;
    servicesArr.push(id);

    this.setState({
        servicesArr,
    }, () => {
        this.props.reviseServicesArray(this.state.servicesArr)  
    })
}

或：

或：

或：

---

您能在例如中创建一个新的应用程序吗？例如，不太清楚代码中的

id

来自何处。你也不应该通过推它来改变你的状态数组。当你包含UL时它有帮助吗<代码>常量服务显示=（

{servicesArr.map（（项，i）=>{item}）}

）HMR谢谢，但没用。我还按照下面提到的Taz742进行了修改，仍然有相同的输出。尝试了这两种方法，仍然得到相同的结果。还从状态中删除了数组，并将其添加到空白数组中，结果仍然相同。

changeSelectionsArray = (id) => {  
    let { servicesArr } = this.state;
    servicesArr.push(id);

    this.setState({
        servicesArr,
    }, () => {
        this.props.reviseServicesArray(this.state.servicesArr)  
    })
}

changeSelectionsArray = (id) => {  
    this.setState({
        servicesArr: [...this.state.servicesArr, id]
    }, () => {
        this.props.reviseServicesArray(this.state.servicesArr)  
    })
}

...

...