Question

我正试图在我的webapp中去除一个组件。实际上它是maxPrice的过滤器，如果用户开始打印，过滤器开始工作，所有结果都消失，直到它背后有合理的数字。

到目前为止我尝试了什么：

import _ from 'lodash'

class MaxPrice extends Component {
  onSet = ({ target: { value }}) => {
    if (isNaN(Number(value))) return;

    this.setState({ value }, () => {
        this.props.updateMaxPrice(value.trim());
    });
  };

  render() {
    const updateMaxPrice = _.debounce(e => {
      this.onSet(e);
    }, 1000);

    return (
      <div>
        <ControlLabel>Preis bis</ControlLabel><br />
        <FormControl type="text" className={utilStyles.fullWidth} placeholder="egal"
          onChange={updateMaxPrice} value={this.props.maxPrice}
        />
      </div>
    );
  }
}

我收到了错误

MaxPrice.js:11 Uncaught TypeError: Cannot read property 'value' of null
at MaxPrice._this.onSet (MaxPrice.js:11)
at MaxPrice.js:21
at invokeFunc (lodash.js:10350)
at trailingEdge (lodash.js:10397)
at timerExpired (lodash.js:10385)

在我的旧版本中，我有onChange={this.onSet}并且它有效。

知道可能出现什么问题吗？

Answer 1

正如您在评论中提到的那样，需要使用event.persist()以异步方式使用事件对象：

https://facebook.github.io/react/docs/events.html

如果要以异步方式访问事件属性，请执行应该在事件上调用event.persist（），这将删除来自池的合成事件，并允许对事件的引用由用户代码保留。

这意味着代码，例如：

onChange={e => {
  e.persist();
  updateMaxPrice(e);
}}

Answer 2

这是我的最终解决方案。感谢lunochkin！

我必须引入第二个redux变量，以便用户看到他输入的值。第二个变量被去抖动，以便WepApp等待更新。

class MaxPrice extends Component {

  updateMaxPriceRedux = _.debounce((value) => { // this can also dispatch a redux action
      this.props.updateMaxPrice(value);
  }, 500);

  onSet = ({ target: { value }}) => {
    console.log(value);
    if (isNaN(Number(value))) return;
    this.props.updateInternalMaxPrice(value.trim());
    this.updateMaxPriceRedux(value.trim());
  };

    render() {
        return (
            <div>
                <ControlLabel>Preis bis</ControlLabel><br />
                <FormControl type="text" className={utilStyles.fullWidth} placeholder="egal"
                             onChange={e => {
                                 e.persist();
                                 this.onSet(e);
                             }} value={this.props.internalMaxPrice}
                />
            </div>
        );
    }
}

function mapStateToProps(state) {
    return {
        maxPrice: state.maxPrice,
        internalMaxPrice: state.internalMaxPrice
    };
}
function mapDispatchToProps(dispatch) {
    return bindActionCreators({updateMaxPrice:updateMaxPrice,
        updateInternalMaxPrice:updateInternalMaxPrice}, dispatch);
}
export default connect(mapStateToProps, mapDispatchToProps)(MaxPrice);

react / redux去噪节流

2 个答案: