React JS -在子单击时更改父状态，映射不可迭代

React JS是一个用于构建用户界面的JavaScript库。它采用组件化的开发模式，使得开发者可以将界面拆分成独立的、可复用的组件，从而提高代码的可维护性和可重用性。

在React中，组件之间的通信是通过props（属性）来实现的。父组件可以将数据通过props传递给子组件，子组件可以读取这些props并进行相应的操作。但是，子组件不能直接修改父组件的状态（state）。

如果需要在子组件中更改父组件的状态，可以通过在父组件中定义一个回调函数，并将该函数作为props传递给子组件。子组件可以在需要的时候调用该回调函数，并将需要更新的数据作为参数传递给它。父组件接收到子组件传递的数据后，可以在回调函数中更新自己的状态。

以下是一个示例代码，演示了在子组件中更改父组件状态的方法：

// 父组件
class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(prevState => ({
      count: prevState.count + 1
    }));
  }

  render() {
    return (
      <div>
        <h1>Count: {this.state.count}</h1>
        <ChildComponent onClick={this.handleClick} />
      </div>
    );
  }
}

// 子组件
class ChildComponent extends React.Component {
  render() {
    return (
      <button onClick={this.props.onClick}>点击增加</button>
    );
  }
}

在上面的代码中，父组件ParentComponent中定义了一个状态count和一个点击事件处理函数handleClick。子组件ChildComponent中的按钮通过onClick属性接收父组件传递的点击事件处理函数，并在点击时调用该函数。

当子组件中的按钮被点击时，父组件的handleClick函数会被调用，从而更新父组件的状态count。更新后的状态会通过React的自动重渲染机制，反映到界面上。

这种方式可以实现子组件通过回调函数来更改父组件的状态，从而实现父子组件之间的数据传递和通信。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云云函数（SCF）。