Question

我有两个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函数上方的第二个组件render函数中，则可以完美运行：

const servicesArr = [“ 5bd97355-50d8-4a06-aced-025c8cc587f3”，“ 5bd97403-ae5b-4c90-92cb-130f86154e27”];

为什么会这样？？???

Answer 1

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

或者：

...

或者：

...

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

1 个答案: