Question

我的状态如下：

B2_u

当我点击按钮时，它将获取B1 B2 B3 B4 B1_u B2_u B3_u B4_u 3 41A 28A 3A A 4 41A 28A 3A A 5 41A 28A 3A A B1 B2 B3 B4 B1_u B2_u B3_u B4_u 6 42A 41A 28A 3A A 7 42A 41A 28A 3A A 8 42A 41A 28A 3A A 9 42A 41A 28A 3A A。

将使用this.state = { data: [ .... ] misc: [ .... ] }来获取data，然后使用data来替换axios

然后按照reactjs setState

更新this.state.data，并且渲染完成后，我想运行一个函数。

我不想在更新render will be called every time you setState to re-render the component if there are changes.时运行该函数。我只想在this.state.data更新时更新

仅在this.state.data更改后，如何在渲染后运行函数

Answer 1

如果要限制特定状态更改的呈现，则只需检查该状态并返回false，否则返回true，如：

shouldComponentUpdate(nextProps, nextState) {

     if(this.state.misc != nextState.misc) {
          return false
     }
     return true
}

Answer 2

如果我正确理解了您的问题，那么您正在谈论生命周期方法的使用...

您应该在componenetDidMount生命周期挂钩中进行数据获取（通过axios或本机获取api进行ajax）

类似这样的东西：

componentDidMount() {
  this.setState({ isLoading: true });

  axios
    .get(url)
    .then(result => this.setState({ data: result.data, isLoading: false }))
    .catch(error => this.setState({ error, isLoading: false }));
}

您在componentDidUpdate中的更新在此处提供更多信息：https://reactjs.org/docs/state-and-lifecycle.html

Answer 3

您可以使用componentDidUpdate（https://reactjs.org/docs/react-component.html#componentdidupdate）。这是一个生命周期事件，每次组件更新时都会触发，因此您可以检查数据的先前状态是否不同于当前状态。我假设数据是一个对象数组，所以要比较它们，您将不得不使用类似于lodash的_.isEqual之类的东西进行比较，否则我下面包含的内容将起作用。

componentDidUpdate(prevProps, prevState) {
  if(JSON.stringify(prevState.data) !== JSON.stringify(this.state.data)) {
    // Execute your code
  }
}

Answer 4

您需要使用componentDidMount()（在安装组件（第一次渲染）后调用）和componentDidUpdate()（在更新发生后立即调用（但不用于初始渲染））。

componentDidUpdate具有3个参数：prevProps，prevState和快照。就您而言，您可以将prevState.data与this.state.data进行比较，以了解data是否已更新：

class Main extends React.Component {

  constructor(props) {
    super(props);
    
    this.counter = 0;
    
    this.state = {
      data: [],
      misc: 'foo',
    };
    
    this.changeData = this.handleChangeData.bind(this);
    this.changeMisc = this.handleChangeMisc.bind(this);
  }
  
  componentDidMount() {
    console.log('componentDidMount!');
  }
  
  componentDidUpdate(prevProps, prevState) {
    if (prevState.data !== this.state.data) {
      console.log('componentDidUpdate and data has changed!');
    }    
  }
  
  handleChangeData() {
    this.setState({
      data: [...this.state.data, this.counter++].slice(-10),
    });
  }
  
  handleChangeMisc() {
    this.setState({
      misc: this.state.misc === 'foo' ? 'bar' : 'foo',
    });
  }
  
  render() {
    return(
      <div>
        <button onClick={this.changeData}>Change data</button>
        <button onClick={this.changeMisc}>Change misc</button>

        <pre>DATA = { this.state.data.join(', ') }</pre>
        <pre>MISC = { this.state.misc }</pre>
      </div>
    );
  }
}

ReactDOM.render(<Main />, document.getElementById('app'));

.as-console-wrapper {
  max-height: 106px !important;
}

<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>

<div id="app"></div>

reactjs：仅在状态的某些部分更改后渲染完成后才执行脚本

4 个答案: