onClick事件的调度动作

Question

在react组件中，我做了一个功能

 handleClick(event, key, value) {
    event.preventDefault()
    this.setState({
      query:"",
      key:key,
      value:value
    });
    this.props.onClick(this.state);
    console.log("key...." + key   );
    console.log("val...." + value);
  }

单击链接时应调用此名称

onClick={(e) => this.handleClick(e, {key}, {el}) }

也使用连接我调度动作如下

export const mapDispatchToProps = (dispatch) => ({

  onClick: (query, key, value) => dispatch(onSearch(query,key, value)


  )
});

但是在搜索方法中，键和值都不确定。但是在handleClick函数中，我得到了

key....[object Object]
val....[object Object]

Answer 1

键和值将是不确定的。 您需要在setState的回调函数上调用props方法，因为在调用setState之后，您将不会获得更新的状态值。

handleClick(event, key, value) {
        event.preventDefault()
        this.setState({
          query:"",
          key:key,
          value:value
        },()=>{

           this.props.onClick(this.state);
        console.log("key...." + key   );
        console.log("val...." + value);
    });

      }

Answer 2

您调用“ onClick”函数的方式是错误的，现在您只传递了一个参数，而不是三个。

应该这样称呼

this.props.onClick(query, key, value);