最新渲染后调用的方法

Question

在我的reactjs应用程序中，在一个组件中，渲染函数被多次调用。我只有在上一次调用渲染时才能使用一些数据。我需要对这些数据进行一些处理。我在哪里可以做？

componentWillMount() {
    get(this.props, 'myarraydata', []).forEach(element => {
        //here i will do some treatments for each elemment
    });
}

render() {
    console.log(get(this.props, 'myarraydata', []));

    return (
        <div>
            <pre>{JSON.stringify(get(this.props, 'myarraydata', []), null, 2) }</pre>
        </div>
    );
}

如您所见，在我的应用程序中，此render方法被调用了很多次，它使用从另一个组件传递的myarraydata，并且myarraydata仅在最后一次调用render时才可用（意味着第一次调用render时） ，第二次，..，我的arraydata为空）。但是问题是componentwillmount方法只被调用了一次，那时，myarraydata仍然为空，我无法做我需要的处理

Answer 1

尝试使用componentDidMount生命周期方法。

需要详细说明

  

我只有在上一次调用渲染时才有一些数据

这到底是什么意思？

编辑：试试看：

componentWillMount() {
  let data = get(this.props, 'myarraydata', [])
  if(data.length !== 0){
   data.forEach(element => {
    //here i will do some treatments for each elemment
    });
  }
}

Answer 2

在随后的每个渲染之后都会调用

componentDidUpdate lifecycle hook，就像在this diagram上看到的一样：

提示在初始化componentDidMount钩子后调用render时未在初始渲染上调用它。

通过道具接收到的数据可以在那里处理，这需要调用setState或forceUpdate然后进行渲染。

在原始代码中，这需要将状态引入此组件。另外，componentWillMount也已弃用，因为它在此类情况下通常被滥用。应将其替换为构造函数代码或componentDidMount。在这种情况下，状态从myarraydata道具同步导出，这就是getDerivedStateFromProps的作用：

state = { processedData: null };

static getDerivedStateFromProps(props, state) {
  if (conditionsToNotProcessData) return null;

  const processedData = props.myarraydata || [];
  for (const item of processedData) { ... }

  return { ...state, processedData };
}

render() {
    return (
        <div>
            <pre>{JSON.stringify(this.state.processedData)}</pre>
        </div>
    );
}