Question

tl; dr - 我想在组件中状态发生变化时触发回调

我有一个变异this.props.items的组件，并在每个变异上触发this.props.onChange。我现在正在做这样的事情：

removeItem(ix) {
  const items = this.state.items.slice();
  items.splice(ix, 1);
  this.setState({ items });
  this.triggerOnChange();
}

我想知道是否可以删除对triggerOnChange的手动调用，而是在this.state.items更新时执行此操作

Answer 1

this.setState有两个参数，第一个是对象（状态），第二个是回调（可选）

this.setState({...}, function(){
  console.log('changed')
})

来自Spec

第二个参数是可选的回调函数完成setState后执行并重新呈现组件

Answer 2

如果要包装状态更改，可以覆盖setState：

setState(state) {
  console.log("New state - before: ", state);
  const retVal = super.setState(state);
  console.log("New state - after");
  return retVal;
}

（这可能有点矫枉过正，我认为setState没有被记录为具有返回值;但令人沮丧的是，据我所知，它没有记录而不是。 ..）

示例：

class MyThingy extends React.Component {
  constructor(props) {
    super(props);
    this.state = {...props};
  }
  
  render() {
    return (
      <div onClick={() => this.update()}>
      <div>{this.state.title}</div>
      {this.state.items.map(e => (
            <div>{e}</div>
      ))}
      </div>
    );
  }
  
  update() {
    this.setState({
      items: ['a', 'b', 'c'],
      title: "After"
    });
  }
  
  setState(state) {
    console.log("New state - before: ", state);
    const retVal = super.setState(state);
    console.log("New state - after");
    return retVal;
  }
}

ReactDOM.render(
  <MyThingy items={[]} title="Before - click me" />,
  document.getElementById("react")
);

<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

或者，您可以将其置于头部并查看MobX。

是否有状态变异观察者的反应？

2 个答案: