Javascript 状态更改时会不必要地触发重复操作

我正在尝试将socketCluster与一个简单的redux应用程序集成。目前，只有一个特性获取组件中当前状态的值，并通过中间件将其发送到服务器

这是我的actions.js文件

export function signupRequest(creds){
  return{
    type: SIGNUP_REQUEST,
    isFetching: true,
    isAuthenticated: false,
    creds
  }
}

我的减速机：

function signUp(state={
  isFetching:false,
  isAuthenticated: localStorage.getItem('id_token')? true : false
},action)
{
  switch(action.type){
    case SIGNUP_REQUEST:
      return Object.assign({},state,{
        isFetching:true,
        isAuthenticated: false,
        user: action.creds
      })
}

我有一个中间件功能，负责向服务器发送输入

中间件.js

export default socket => store => next => action => {
  socket.emit('action',action);
}

我的客户端index.js文件

const socket = connect();
const createStoreWithMiddleware = applyMiddleware(middlewares(socket))(createStore);
const store = createStoreWithMiddleware(reducer);

let rootElement = document.getElementById('root')

render(
  <Provider store={store}>
    <App/>
  </Provider>,rootElement
)

如您所见，套接字正在输入中的每个按键上发送操作单击按钮也不会调用中间件

编辑-我尝试将注册组件转换为一个容器-但我似乎仍然有同样的问题

class Signup extends Component{

  constructor(props){
    super(props);

    this.state = {name:''};
    this.onInputChange = this.onInputChange.bind(this)
  }

  onInputChange(event){
    this.setState({name:event.target.value})
  }

  render(){
    return (
      <div>
        <input type="text"
          ref="username"
          className="SignupUsername"
          placeholder="Username"
          value = {this.state.name}
          onChange={this.onInputChange}
          />
        <button onClick= {this.props.signupRequest(this.state.name)} >
          Signup
        </button>
      </div>
    )
  }
}

function mapDispatchToProps(dispatch){
  return bindActionCreators({signupRequest:signupRequest},dispatch)
}

export default connect(null,mapDispatchToProps)(Signup)

类注册扩展组件{
建造师（道具）{
超级（道具）；
this.state={name:''}；
this.onInputChange=this.onInputChange.bind（this）
}
onInputChange（事件）{
this.setState（{name:event.target.value}）
}
render（）{
返回(
报名
)
}
}
功能图DispatchToprops（调度）{
返回bindActionCreators（{signupRequest:signupRequest}，dispatch）
}
导出默认连接（空，mapDispatchToProps）（注册）

发现问题出在onClick事件上-我将onClick事件转换为一个函数，如下所示：

<button onClick= {() => this.props.signupRequest(this.state.name)} >
  Signup
</button>

this.props.signupRequest（this.state.name）}>
报名

相对于

  <button onClick= {this.props.signupRequest(this.state.name)} >
          Signup
        </button>

报名

你能在CodePen或JSFIDLE中重现这个问题吗？找出我的错误：）。。也张贴了我的答案。很抱歉浪费您的时间是的，处理程序必须始终是回调，否则每次视图呈现时都会调用它们。由于键入是调用一个claded

this.setState

的函数，因此每次单击时组件都会重新呈现，每次都会立即调用

onClick

函数！

class Signup extends Component{

  constructor(props){
    super(props);

    this.state = {name:''};
    this.onInputChange = this.onInputChange.bind(this)
  }

  onInputChange(event){
    this.setState({name:event.target.value})
  }

  render(){
    return (
      <div>
        <input type="text"
          ref="username"
          className="SignupUsername"
          placeholder="Username"
          value = {this.state.name}
          onChange={this.onInputChange}
          />
        <button onClick= {this.props.signupRequest(this.state.name)} >
          Signup
        </button>
      </div>
    )
  }
}

function mapDispatchToProps(dispatch){
  return bindActionCreators({signupRequest:signupRequest},dispatch)
}

export default connect(null,mapDispatchToProps)(Signup)

<button onClick= {() => this.props.signupRequest(this.state.name)} >
  Signup
</button>

  <button onClick= {this.props.signupRequest(this.state.name)} >
          Signup
        </button>