时间戳

首页 > 解决方案 > React 数组为什么会这样？

javascript - React 数组为什么会这样？

问题描述

我有两个 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"]

所以我通过道具把这个数组带到我的第二个组件中，当我 console.log 道具时，我得到了上面显示的确切数组。这是第二个组件：

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>  
    )  
  }
}

输出全部作为一个子弹捣碎在一起，如下所示：

- 5bd97355-50d8-4a06-aced-025c8cc587f35bd97403-ae5b-4c90-92cb-130f86154e27

而不是单个子弹。如果我将此行添加到 map 函数上方的第二个组件渲染函数中，它将完美运行：

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

为什么会这样？？？？

标签： javascriptarraysreactjs

解决方案

因为 this.state.array.push() 是错误的语法。此外，如果您想使用更新状态，则需要在 setState 之后使用 callBack。

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)  
    })
}

或者：

...

或者：

...

推荐阅读