Создание новых переменных состояния вне конструктора

Question

Я пытаюсь создать несколько имен переменных состояния из данных в массиве, который уже является переменной состояния. Количество необходимых переменных может меняться от загрузки страницы к загрузке страницы, поэтому я не могу их сразу инициализировать

Я настроил нижеприведенную функцию, которая, по моему мнению, должна делать то, для чего я ее предназначаю, но я не могу понять, где разместить ее в компоненте.

makeButtons() {
    this.state.Buttons.forEach((button) => {
        let key = button.fields.Label

        this.setState({ [key]: '' })
    }); 

}

Я пытался вызвать его в render (), но это просто дает мне ошибку бесконечного цикла, что имеет смысл. Есть идеи?

РЕДАКТИРОВАТЬ: Попытка вызова в componentDidMount (), но это, похоже, тоже не работает. Не уверен, что проблема будет там. Код ниже

base('ButtonInfo').select({view: 'Grid view' }).eachPage(
            (Buttons, fetchNextPage) => {
                this.setState({
                    Buttons
                });
                fetchNextPage();
            }
        );
        this.state.Buttons.forEach((button) => {
            let key = button.fields.Label

            this.setState({ [key]: '' })
       }); 

РЕДАКТИРОВАТЬ: Ответ в комментариях ниже, мне нужно было добавить await перед вызовом API и сделать асинхронный componentDidMount ().

Answer 1

Как насчет того, чтобы сделать это в componentDidMount ()? Этот метод вызывается только один раз, как приложение после первого рендеринга, и часто используется для инициализации приложения с некоторыми данными.