在构造函数之外创建新的状态变量

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]: '' })
       }); 

编辑：答案在下面的 cmets 中，我需要在 api 调用之前添加 await 并使 componentDidMount() 异步。

Answer 1

如何在 componentDidMount() 中做呢？该方法只在应用第一次渲染后调用一次，常用于应用一些数据初始化应用。