Метод вызывается после последнего рендера - PullRequest
Новая
       13

Метод вызывается после последнего рендера

0 голосов
/ 12 сентября 2018

В моем приложении activjs, в одном компоненте, функция рендеринга вызывается много раз. У меня есть некоторые данные, доступные только в последний раз, когда вызывается рендер. Мне нужно сделать некоторые обработки на этих данных. Где я могу это сделать? 

<code>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) }
); }

Как вы можете видеть, в моем приложении этот метод рендеринга вызывается много раз, и он использует myarraydata, переданные из другого компонента, а myarraydata доступен только тогда, когда рендеринг вызывается в последний раз (означает, что рендеринг вызывается для первого во-вторых, .. раз, мои массивы пустые). но проблема в том, что метод componentwillmount вызывается только один раз, и в то время myarraydata все еще пуста, и я не могу выполнить необходимые мне процедуры

Ответы [ 2 ]

0 голосов
/ 12 сентября 2018

componentDidUpdate ловушка жизненного цикла вызывается после каждого последующего рендеринга, как это видно на этой диаграмме :

lifecycle diagram

, то есть, что он не вызывается при первоначальном рендеринге, когда componentDidMount вызывается вместо render hook.

Данные, полученные через реквизиты, могут обрабатываться там, для этого требуется:затем вызовите setState или forceUpdate, чтобы сделать его визуализированным.

В исходном коде для этого требуется ввести состояние этого компонента.Кроме того, componentWillMount устарело, потому что его обычно неправильно использовали в подобных случаях.Его следует заменить на код конструктора или componentDidMount.В этом случае состояние синхронно происходит от myarraydata prop, вот для чего getDerivedStateFromProps: 

<code>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)}
);}
0 голосов
/ 12 сентября 2018

Попробуйте использовать метод жизненного цикла componentDidMount .

Требуется уточнение по

У меня есть некоторые данные, доступные только в последний раз, когда рендер называется

Что это значит точно?

РЕДАКТИРОВАТЬ: Попробуйте это: 

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