Метод, вызываемый после последнего рендеринга
В моем приложении reactjs в одном компоненте функция рендеринга вызывается много раз. У меня есть данные, доступные только при последнем вызове рендера. Мне нужно обработать эти данные. Где я могу это сделать?
componentWillMount() {
get(this.props, 'myarraydata', []).forEach(element => {
//here i will do some treatments for each elemment
});
}
render() {
console.info(get(this.props, 'myarraydata', []));
return (
<div>
<pre>{JSON.stringify(get(this.props, 'myarraydata', []), null, 2) }</pre>
</div>
);
}
Как вы можете видеть, в моем приложении этот метод рендеринга вызывается много раз, и он использует данные myarraydata, переданные из другого компонента, и данные myarraydata доступны только тогда, когда рендеринг вызывается в последний раз (означает, когда рендеринг вызывается для первого, второго, .. раз мой массив данных пуст). но проблема в том, что метод componentwillmount вызывается только один раз, и в это время myarraydata все еще пуста, и я не могу выполнять необходимые процедуры.
Ответы 2
Попробуйте использовать метод жизненного цикла componentDidMount.
Требуется уточнение
I have some data available only at the last time the render is called
Что именно это означает?
Обновлено: Попробуйте это:
componentWillMount() {
let data = get(this.props, 'myarraydata', [])
if (data.length !== 0){
data.forEach(element => {
//here i will do some treatments for each elemment
});
}
}
пожалуйста, посмотрите мой пост обновлен, дайте мне знать, если вам нужны более подробные сведения
спасибо @Shivam Gupta, я думаю, что приведенный выше ответ estus будет работать
О, круто. Не забудьте проголосовать за его ответ, если он вам помог.
Крючок жизненного цикла componentDidUpdate вызывается после каждого последующего рендеринга, как это видно на эта диаграмма:
Заметьте, что он не вызывается при начальном рендеринге, когда 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>
);
}
Мне нужно провести лечение только один раз, когда функция рендеринга вызывается с непустыми данными. Поэтому я не могу использовать componentdidmount, потому что он вызывается сразу после первого рендеринга, и в это время данные пусты. Я не могу использовать componentdidupdate, потому что он вызывается каждый раз, когда render вызывается так много раз, и мне нужно запускать свои процедуры только один раз
Я обновил ответ, указав, как я этого ожидаю. Вероятно, вам придется контролировать, когда данные обрабатываются, а когда нет.
спасибо @estus, это поможет мне. если я не ошибаюсь, getDerivedStateFromProps будет вызываться всегда перед рендерингом. Можно ли сказать «всегда вызывать этот метод перед рендерингом, но как только myarraydata не станет пустым, мы перестанем его вызывать»?
Нет необходимости прекращать называть это. Для этого и нужен conditionsToNotProcessData. Индикатор того, что данные были обработаны один раз, - это то, что processedData не пустой, верно? Тогда это будет if (state.processedData) return null.
и как я могу установить условияToNotProcessData, если сохранить его в состоянии компонента, мне нужно будет вызвать состояние набора внутри метода getDerivedStateFromProps, и это может привести к бесконечному циклу
Вам не нужно вызывать setState в getDerivedStateFromProps (и, к счастью, это невозможно сделать, потому что он статичен и не имеет доступа к this.setState). Он должен синхронно возвращать измененное состояние, как показано в ответе.
ooooh yeaaah, хорошее решение кажется. Спасибо @estus, попробую, надеюсь, мне это поможет
К сожалению, я использую response 16.2, а getDerivedStateFromProps был представлен в версии React 16.3, поэтому не могу его использовать.
Не могли бы вы опубликовать код? Вопрос непонятный.